npm - tango-app-ui-analyse-trax - Versions diffs - 3.6.2-bulktask-9 → 3.6.2-bulktask-12 - Mend

tango-app-ui-analyse-trax 3.6.2-bulktask-9 → 3.6.2-bulktask-12

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 (13) hide show

package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-fgU4Z8FP.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-PAL7XzVi.mjs} RENAMED Viewed

@@ -7751,6 +7751,7 @@ class AddTaskComponent {
             .at(sectionIndex).get('questions').push(questionFormData);
     }
     addAnswerForm(answer, sectionIndex, questionIndex, insertIndex) {
+        console.log(answer?.referenceImage);
         const answerFormData = this.fb.group({
             answer: [answer?.answer ?? ''],
             answeroptionNumber: [answer?.answeroptionNumber ?? (this.getAnswers(sectionIndex, questionIndex)?.length ? this.getAnswers(sectionIndex, questionIndex).length + 1 : 1), [Validators.required]],
@@ -8935,6 +8936,10 @@ class AddMultitaskComponent {
             }
         }
     }
+    preventEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
     createForm() {
         this.taskForm = this.fb.group({
             checklistName: ['', [Validators.required, noWhitespaceValidator()]],
@@ -8978,6 +8983,7 @@ class AddMultitaskComponent {
             .at(sectionIndex).get('questions').push(questionFormData);
     }
     addAnswerForm(answer, sectionIndex, questionIndex, insertIndex) {
+        console.log(answer?.referenceImage);
         const answerFormData = this.fb.group({
             answer: [answer?.answer ?? ''],
             answeroptionNumber: [answer?.answeroptionNumber ?? (this.getAnswers(sectionIndex, questionIndex)?.length ? this.getAnswers(sectionIndex, questionIndex).length + 1 : 1), [Validators.required]],
@@ -9200,11 +9206,11 @@ class AddMultitaskComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddMultitaskComponent, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2$2.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i2.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: AddMultitaskComponent, selector: "lib-add-multitask", inputs: { type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype", showcomment: "showcomment", excelData: "excelData", payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo" }, 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 ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"modal-header px-0 py-5 \">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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                <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1  scroll custom-scroll\">\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                                    <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name<span class=\"text-danger\">*</span>\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\r\n\r\n                                <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n                                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                             \r\n                                                <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                           \r\n                                                <img  src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n                                    <div class=\"row\" *ngFor=\"let item of payload.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\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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                                <h3 class=\"mt-3 mb-3\">Configurations</h3>\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                                    *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\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')|| answer.get('answer')?.hasError('whitespace')\"\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 *ngIf=\"isInvalidAnswer(i,j)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        (click)=\"onAnswerDelete(i, j, k)\"\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')||answer.get('answer')?.hasError('whitespace')\"\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                                                                    *ngIf=\"question.controls.descriptivetype\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input\r\n                                                                                [formControl]=\"question.controls.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\r\n                                                                                [formControl]=\"question.controls.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 type=\"button\" (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                                <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\"\r\n                                        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\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                            </button>\r\n                            <div *ngIf=\"dropDown\"\r\n                                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 *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)\" (click)=\"selectItem(item.text)\">\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 row mb-3 fv-plugins-icon-container\">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Priority\r\n                        </label>\r\n\r\n                        <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"priorityTypeList\"\r\n                            (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n\r\n                        <label class=\"label-name my-2\">\r\n                            Assign to\r\n                        </label>\r\n\r\n                        <div *ngIf=\"filtertype==='Teams'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                        </div>\r\n                        <div *ngIf=\"filtertype==='Clusters'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                        </div>\r\n                    </div>\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\" *ngIf=\"this.uploadedFiles.length<3\"\r\n                        (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\"\r\n                            (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n                            <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n                            <img [src]=\"item\" alt=\"Preview\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n                                (change)=\"togglegeofencing($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, the checklist can be filled by the user only when inside the store.\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                    </div>\r\n\r\n                    <div class=\"form-check p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n                                (change)=\"toggleAttendance($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, user can't be able to clockout without completing the task.\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </form>\r\n\r\n        </div>\r\n        <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n            <div role=\"group\" class=\"d-flex mt-3 w-100\">\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                    [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n                    (click)=\"onSubmit()\">Create\r\n                    Task</button>\r\n            </div>\r\n        </div>\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 scroll \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\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                            <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Your Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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\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                                    <div *ngIf=\"filtertype==='Teams'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                            [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                                    </div>\r\n                                    <div *ngIf=\"filtertype==='Clusters'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                            [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n                                            [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                                    </div>\r\n\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                                            [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\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: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}: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}:host::ng-deep .label{color:var(--Gray-700, #344054);font-size:14px;width:200px}:host::ng-deep .value{font-weight:600;font-size:16px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.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"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddMultitaskComponent, selector: "lib-add-multitask", inputs: { type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype", showcomment: "showcomment", excelData: "excelData", payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo" }, 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\" (keydown.enter)=\"preventEnter($event)\">\r\n    <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"modal-header px-0 py-5 \">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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                <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1  scroll custom-scroll\">\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                                    <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label1 me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name<span class=\"text-danger\">*</span>\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\r\n\r\n                                <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n                                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                             \r\n                                                <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                           \r\n                                                <img  src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n                                    <div class=\"row\" *ngFor=\"let item of payload.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\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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                                <h3 class=\"mt-3 mb-3\">Configurations</h3>\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                                    *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\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')|| answer.get('answer')?.hasError('whitespace')\"\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 *ngIf=\"isInvalidAnswer(i,j)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        (click)=\"onAnswerDelete(i, j, k)\"\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')||answer.get('answer')?.hasError('whitespace')\"\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                                                                    *ngIf=\"question.controls.descriptivetype\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input\r\n                                                                                [formControl]=\"question.controls.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\r\n                                                                                [formControl]=\"question.controls.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 type=\"button\" (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                                <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\"\r\n                                        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\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                            </button>\r\n                            <div *ngIf=\"dropDown\"\r\n                                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 *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)\" (click)=\"selectItem(item.text)\">\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 row mb-3 fv-plugins-icon-container\">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Priority\r\n                        </label>\r\n\r\n                        <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"priorityTypeList\"\r\n                            (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n\r\n                        <label class=\"label-name my-2\">\r\n                            Assign to\r\n                        </label>\r\n\r\n                        <div *ngIf=\"filtertype==='Teams'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                        </div>\r\n                        <div *ngIf=\"filtertype==='Clusters'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                        </div>\r\n                    </div>\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\" *ngIf=\"this.uploadedFiles.length<3\"\r\n                        (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\"\r\n                            (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n                            <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n                            <img [src]=\"item\" alt=\"Preview\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf=\"payload.coverage==='store'\">\r\n                    <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n                                (change)=\"togglegeofencing($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, the checklist can be filled by the user only when inside the store.\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                    </div>\r\n\r\n                    <div class=\"form-check p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n                                (change)=\"toggleAttendance($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, user can't be able to clockout without completing the task.\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </form>\r\n\r\n        </div>\r\n        <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n            <div role=\"group\" class=\"d-flex mt-3 w-100\">\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                    [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n                    (click)=\"onSubmit()\">Create\r\n                    Task</button>\r\n            </div>\r\n        </div>\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 scroll \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\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                            <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Redo is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label1 me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Your Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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\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                                    <div *ngIf=\"filtertype==='Teams'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                            [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                                    </div>\r\n                                    <div *ngIf=\"filtertype==='Clusters'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                            [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n                                            [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                                    </div>\r\n\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                                            [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\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: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}: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}:host::ng-deep .label{color:var(--Gray-700, #344054);font-size:14px;width:200px}:host::ng-deep .label1{color:var(--Gray-700, #344054);font-size:14px;width:160px}:host::ng-deep .value{font-weight:600;font-size:16px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.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"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddMultitaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-multitask', template: "<div class=\"card group-delete py-0\">\r\n    <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"modal-header px-0 py-5 \">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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                <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1  scroll custom-scroll\">\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                                    <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name<span class=\"text-danger\">*</span>\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\r\n\r\n                                <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n                                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                             \r\n                                                <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                           \r\n                                                <img  src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n                                    <div class=\"row\" *ngFor=\"let item of payload.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\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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                                <h3 class=\"mt-3 mb-3\">Configurations</h3>\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                                    *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\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')|| answer.get('answer')?.hasError('whitespace')\"\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 *ngIf=\"isInvalidAnswer(i,j)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        (click)=\"onAnswerDelete(i, j, k)\"\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')||answer.get('answer')?.hasError('whitespace')\"\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                                                                    *ngIf=\"question.controls.descriptivetype\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input\r\n                                                                                [formControl]=\"question.controls.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\r\n                                                                                [formControl]=\"question.controls.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 type=\"button\" (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                                <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\"\r\n                                        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\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                            </button>\r\n                            <div *ngIf=\"dropDown\"\r\n                                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 *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)\" (click)=\"selectItem(item.text)\">\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 row mb-3 fv-plugins-icon-container\">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Priority\r\n                        </label>\r\n\r\n                        <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"priorityTypeList\"\r\n                            (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n\r\n                        <label class=\"label-name my-2\">\r\n                            Assign to\r\n                        </label>\r\n\r\n                        <div *ngIf=\"filtertype==='Teams'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                        </div>\r\n                        <div *ngIf=\"filtertype==='Clusters'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                        </div>\r\n                    </div>\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\" *ngIf=\"this.uploadedFiles.length<3\"\r\n                        (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\"\r\n                            (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n                            <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n                            <img [src]=\"item\" alt=\"Preview\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n                                (change)=\"togglegeofencing($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, the checklist can be filled by the user only when inside the store.\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                    </div>\r\n\r\n                    <div class=\"form-check p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n                                (change)=\"toggleAttendance($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, user can't be able to clockout without completing the task.\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </form>\r\n\r\n        </div>\r\n        <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n            <div role=\"group\" class=\"d-flex mt-3 w-100\">\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                    [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n                    (click)=\"onSubmit()\">Create\r\n                    Task</button>\r\n            </div>\r\n        </div>\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 scroll \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\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                            <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Your Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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\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                                    <div *ngIf=\"filtertype==='Teams'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                            [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                                    </div>\r\n                                    <div *ngIf=\"filtertype==='Clusters'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                            [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n                                            [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                                    </div>\r\n\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                                            [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\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: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}: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}:host::ng-deep .label{color:var(--Gray-700, #344054);font-size:14px;width:200px}:host::ng-deep .value{font-weight:600;font-size:16px}\n"] }]
+            args: [{ selector: 'lib-add-multitask', template: "<div class=\"card group-delete py-0\" (keydown.enter)=\"preventEnter($event)\">\r\n    <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"modal-header px-0 py-5 \">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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                <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1  scroll custom-scroll\">\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                                    <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Task is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label1 me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name<span class=\"text-danger\">*</span>\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\r\n\r\n                                <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n                                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                             \r\n                                                <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n                    \r\n                                    <div class=\"carousel\">\r\n                                        <div class=\"carousel-inner\">\r\n                                          <div\r\n                                            class=\"carousel-item\"\r\n                                            *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                            [class.active]=\"i === currentIndex\"\r\n                                          >\r\n                                            <div class=\"row\">\r\n                                           \r\n                                                <img  src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n                                                     class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n                                                     alt=\"Image {{ i + 1 }}\" />\r\n                                              </div>\r\n                                          </div>\r\n                                        </div>\r\n                                        <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n                                          <span class=\"carousel-control-prev-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n                                          <span class=\"carousel-control-next-icon\"></span>\r\n                                        </button>\r\n                                     \r\n                                        <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n                                          <ul class=\"carousel-indicators\">\r\n                                            <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n                                                [class.active]=\"i === currentIndex\"\r\n                                                (click)=\"goToSlide(i)\">\r\n                                            </li>\r\n                                          </ul>\r\n                                        </div>\r\n             \r\n                                      </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n                                    <div class=\"row\" *ngFor=\"let item of payload.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\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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                                <h3 class=\"mt-3 mb-3\">Configurations</h3>\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                                    *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\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')|| answer.get('answer')?.hasError('whitespace')\"\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 *ngIf=\"isInvalidAnswer(i,j)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        (click)=\"onAnswerDelete(i, j, k)\"\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')||answer.get('answer')?.hasError('whitespace')\"\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                                                                    *ngIf=\"question.controls.descriptivetype\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input\r\n                                                                                [formControl]=\"question.controls.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\r\n                                                                                [formControl]=\"question.controls.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 type=\"button\" (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                                <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\"\r\n                                        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\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                            </button>\r\n                            <div *ngIf=\"dropDown\"\r\n                                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 *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)\" (click)=\"selectItem(item.text)\">\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 row mb-3 fv-plugins-icon-container\">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Priority\r\n                        </label>\r\n\r\n                        <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"priorityTypeList\"\r\n                            (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n\r\n                        <label class=\"label-name my-2\">\r\n                            Assign to\r\n                        </label>\r\n\r\n                        <div *ngIf=\"filtertype==='Teams'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                        </div>\r\n                        <div *ngIf=\"filtertype==='Clusters'\">\r\n                            <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n                                [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                        </div>\r\n                    </div>\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\" *ngIf=\"this.uploadedFiles.length<3\"\r\n                        (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\"\r\n                            (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n                            <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n                            <img [src]=\"item\" alt=\"Preview\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf=\"payload.coverage==='store'\">\r\n                    <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n                                (change)=\"togglegeofencing($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, the checklist can be filled by the user only when inside the store.\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                    </div>\r\n\r\n                    <div class=\"form-check p-3 border rounded option-box\"\r\n                        [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n                        <div class=\"form-check form-switch ps-0 my-2\">\r\n                            <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n                                id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n                                (change)=\"toggleAttendance($event)\">\r\n                            <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n                            <div class=\"text-muted medium mt-1 ms-10\">\r\n                                By enabling, user can't be able to clockout without completing the task.\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </form>\r\n\r\n        </div>\r\n        <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n            <div role=\"group\" class=\"d-flex mt-3 w-100\">\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                    [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n                    (click)=\"onSubmit()\">Create\r\n                    Task</button>\r\n            </div>\r\n        </div>\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 scroll \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\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 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\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                            <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                <div class=\"container\">\r\n                                    <p class=\"text-gray-600 mb-2\">This Redo is linked to</p>\r\n\r\n                                    <div class=\"mb-2\">\r\n                                        <span class=\"label\">Checklist Name <span class=\"ms-6\">:</span></span>\r\n                                        <span class=\"value ms-9\">{{payload.checklistName}}</span>\r\n                                    </div>\r\n\r\n                                    <div class=\"mb-2 d-flex\">\r\n                                        <span class=\"label1 me-1\">Question <span class=\"ms-20\">:</span></span>\r\n                                        <div class=\"text-gray-500\">\r\n                                            {{question.get('qno')?.value}}.\r\n                                            {{question.get('qname')?.value}}\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div *ngIf=\"payload.coverage==='store'\">\r\n                                        <span class=\"label\">Stores Selected <span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedStores.length}} stores</span>\r\n                                    </div>\r\n                                    <div *ngIf=\"payload.coverage==='user'\">\r\n                                        <span class=\"label\">users Selected<span class=\"ms-9\">:</span></span>\r\n                                        <span class=\"value ms-8\">{{payload.selectedUsers.length}} users</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Your Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a comment\"\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\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                                    <div *ngIf=\"filtertype==='Teams'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n                                            [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n                                    </div>\r\n                                    <div *ngIf=\"filtertype==='Clusters'\">\r\n                                        <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n                                            [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n                                            [dropDowndisabled]=\"true\"\r\n                                            [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n                                    </div>\r\n\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                                            [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\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: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}: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}:host::ng-deep .label{color:var(--Gray-700, #344054);font-size:14px;width:200px}:host::ng-deep .label1{color:var(--Gray-700, #344054);font-size:14px;width:160px}:host::ng-deep .value{font-weight:600;font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2$2.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i2.NgbModal }, { type: i1$2.Router }, { type: i3.ToastService }], propDecorators: { type: [{
                 type: Input
             }], sourceCheckList_id: [{
@@ -9303,7 +9309,7 @@ class BulkcreationmodelComponent {
         });
     }
     closeactivepopup() {
-        this.activeModal.close();
+        this.activeModal.close('submit');
         this.modalService.dismissAll();
     }
     validateDetails() {
@@ -9357,11 +9363,11 @@ class BulkcreationmodelComponent {
     }
     getStoreCounts(data) {
         if (this.payload.coverage === 'store') {
-            const uniqueStoreNames = new Set(data.map((item) => item.storeName));
+            const uniqueStoreNames = new Set(data.map((item) => item["Store Name"]));
             return uniqueStoreNames.size;
         }
-        else if (this.payload.coverage === 'users') {
-            const uniqueUserNames = new Set(data.map((item) => item.userName));
+        else if (this.payload.coverage === 'user') {
+            const uniqueUserNames = new Set(data.map((item) => item['User Email']));
             return uniqueUserNames.size;
         }
     }
@@ -9435,16 +9441,17 @@ class BulkcreationmodelComponent {
                     }
                     console.log(this.payload.coverage);
                     if (this.payload.coverage === 'store') {
-                        console.log(element.storeName);
-                        if ((element.storeName && element.storeName.trim() == '') || element.storeName == null) {
+                        console.log(element);
+                        console.log(element['Store Name']);
+                        if ((element['Store Name'] && element['Store Name'].trim() == '') || element['Store Name'] == null) {
                             error.push(`Invalid StoreName - C${index + 2}`);
                         }
                     }
                     else if (this.payload.coverage === 'users') {
-                        if ((element.userEmail && element.userEmail.trim() == '') || element.userEmail == null) {
+                        if ((element['User Email'] && element['User Email'].trim() == '') || element['User Email'] == null) {
                             error.push(`Invalid userEmail - C${index + 2}`);
                         }
-                        if (element?.userEmail && !element.userEmail.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/)) {
+                        if (element['User Email'] && !element['User Email'].match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/)) {
                             error.push(`Invalid userEmail - C${index + 2}`);
                         }
                     }
@@ -10757,7 +10764,8 @@ class GalleryComponent {
                             if (res && res.code === 200) {
                                 this.userList = res.data.storesDetails;
                                 console.log("-----", this.userList);
-                                this.galleryForm.get('userList')?.setValue(this.userList);
+                                // this.galleryForm.get('userList')?.setValue(this.userList)
+                                //hided becoz while select single user and apply its applied all user to the list
                                 this.galleryForm.get('storeList')?.setValue([]);
                                 this.storeList = [];
                                 this.getChecklistQA(false);
@@ -11529,6 +11537,11 @@ class GalleryComponent {
         });
         modalRef.componentInstance.type = type;
         modalRef.componentInstance.filtertype = this.galleryForm.value.filtertype;
+        this.inputDataTask?.answers.forEach((ans) => {
+            if (ans?.referenceImage && ans?.referenceImage != '' && ans?.referenceImage != null) {
+                ans.referenceImage = [ans?.referenceImage];
+            }
+        });
         modalRef.componentInstance.taskDetails = {
             sections: [
                 {
@@ -12052,6 +12065,14 @@ class GalleryComponent {
                 if (res && res.code === 200) {
                     this.approvalstatus();
                     this.viewChecklistsData = res.data;
+                    if (this.showsingle) {
+                        let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers;
+                        this.viewChecklistsData.checklistAnswers.map((details) => {
+                            if (loopingData.filter((ele) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                                details.questionAnswer[0].questions[0].checked = true;
+                            }
+                        });
+                    }
                     this.totalCount = this.viewChecklistsData.total_count;
                     this.viewloading = false;
                     this.viewnoData = false;
@@ -12103,6 +12124,14 @@ class GalleryComponent {
                 if (res && res.code === 200) {
                     this.approvalstatus();
                     this.viewChecklistsData = res.data;
+                    if (this.showsingle) {
+                        let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers;
+                        this.viewChecklistsData.checklistAnswers.map((details) => {
+                            if (loopingData.filter((ele) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                                details.questionAnswer[0].questions[0].checked = true;
+                            }
+                        });
+                    }
                     this.totalCount = this.viewChecklistsData.total_count;
                     this.viewloading = false;
                     this.viewnoData = false;
@@ -12455,6 +12484,14 @@ class GalleryComponent {
             next: (res) => {
                 if (res && res.code === 200) {
                     this.viewChecklistsData = res.data;
+                    if (this.showsingle) {
+                        let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers;
+                        this.viewChecklistsData.checklistAnswers.map((details) => {
+                            if (loopingData.filter((ele) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                                details.questionAnswer[0].questions[0].checked = true;
+                            }
+                        });
+                    }
                     this.totalCount = this.viewChecklistsData.total_count;
                     this.viewloading = false;
                     this.viewnoData = false;
@@ -12748,11 +12785,11 @@ class GalleryComponent {
         document.body.removeChild(a);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: i1.FormBuilder }, { token: i2$2.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i2.NgbModal }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i6.Location }, { token: i2$2.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)" } }, viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n    <!-- toast card starts -->\r\n    <div class=\"toastcard col-md-12 mb-4\">\r\n        <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n            <span class=\"align-items-start\">\r\n                <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <path\r\n                                d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n                        </svg>\r\n                    </span>New Detection Found! Refresh Now to view new detection</span>\r\n            </span>\r\n            <button (click)=\"refreshnow()\" type=\"button\"\r\n                class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n                    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_12165_62781)\">\r\n                        <path\r\n                            d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_12165_62781\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\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'\" [opens]=\"'right'\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n                                (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [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-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n                            [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n                            [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n\r\n                        <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n                                Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n                                Select Teams\r\n                            </div>\r\n                            <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                                Select Stores\r\n                            </div>\r\n                            <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [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-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n                                Select users\r\n                            </div>\r\n                            <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('userList')?.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                            <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"adults\">Adults</option>\r\n                                    <option value=\"kids\">Kids</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"rejected\">Breached</option>\r\n                                    <option value=\"approved\">Not-breached</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n                                <div class=\"select-wrapper\">\r\n                                    <div class=\"placeholder-overlay\"\r\n                                        *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n                                        Select Zone\r\n                                    </div>\r\n                                    <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                        [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n                                        [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n                                <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n                                    [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"Approved\">Approved</option>\r\n                                    <option value=\"notapproved\">Not-Approved</option>\r\n                                </select>\r\n                            </div>\r\n                            <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n                                <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n                            </span>\r\n                            <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n                                <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n                            </span>\r\n\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                            <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</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=\"card my-2\">\r\n    <div class=\"row main-container my-5 \">\r\n\r\n        <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n            <div class=\"position-relative h-650px scroll-y\">\r\n                <div class=\"card-body p-5\">\r\n                    <div class=\"checklist-left\">\r\n                        <div class=\"checklist-title\">{{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&&select === 'custom' || noData&&select === 'task'\" 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-75 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\r\n                    <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20 mb-3\">\r\n                            <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No Detections found</div>\r\n                                <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\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\"\r\n                                    *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    (click)=\"onchecklistreset()\"> Reset </button>\r\n                                <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    class=\"btn btn-primary w-25  btn-resize\"\r\n                                    (click)=\"selectsinglequestion()\">Apply</button>\r\n                            </div>\r\n                            <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n                                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\"\r\n                                    style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n                                    <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n                                        {{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;\"\r\n                                            class=\"d-flex my-2 q-btn\" cdkDrag>\r\n                                            <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                (click)=\"selectedQuestion($event,section,question)\"\r\n                                                class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n                                            <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n                                                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=\"combinedChecklist.includes(select)\">\r\n                            <div class=\"text-end mt-10\">\r\n                                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n                                </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 \"\r\n                                    [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                                    <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n                                        [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n                                        [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)\"\r\n                                        [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                        <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n                                            type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                        <label for=\"label{{i}}\"\r\n                                            [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n                                        <span class=\"badge badge-light-primary detectionright\"\r\n                                            *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\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n            <div class=\"position-relative \">\r\n                <div class=\"card-header border-0  px-0 my-0\"\r\n                    *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n                    <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n                    \r\n                    <div class=\" m-3\"\r\n                        *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n                        <div class=\"form-check\">\r\n                            <input [(ngModel)]=\"selectAllTask\"\r\n                                (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n                                class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                            <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n                                Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n                            </label>\r\n                        </div>\r\n\r\n\r\n\r\n                    </div>\r\n                    <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n                        <div class=\"me-4\"  *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n                          <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('task')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46304)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <path d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span> \r\n                          \r\n                        </div>\r\n                        \r\n                        <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n                                <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('redo')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46303)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <g clip-path=\"url(#clip0_12998_46303)\">\r\n                                    <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    <clipPath id=\"clip0_12998_46303\">\r\n                                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n                                    </clipPath>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                \r\n\r\n                        </div>\r\n                        <div class=\"position-relative cursor-pointer me-10\">\r\n                            <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                                {{ exportLabel }} <!-- Bind label text here -->\r\n                            </div>\r\n                            <div *ngIf=\"exportShow\"\r\n                                class=\"card py-2  position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n                                <ul class=\"list-unstyled mb-2\">\r\n                                    <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n                                        *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                                        Export as PDF\r\n                                    </li>\r\n                                    <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n                                        *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                                        Export as CSV\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n                                        class=\" cursor-pointer checkbox-label py-4  mx-2\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                                        Export as PPT\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n                                        class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n                                        (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\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\r\n                        <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                    <div class=\"nodata-title\">No Detections found</div>\r\n                                    <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 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\">\r\n                                    {{this.selectedSection[0]?.questions[0]}}</div>\r\n                                <div *ngIf=\"showsingle&&showfilter\">\r\n                                    <ul\r\n                                        class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                        <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n                                            <a (click)=\"taskTab(item)\"\r\n                                                [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n                                                class=\"nav-link cursor-pointer no-border me-3\">\r\n                                                {{item.key}}<span class=\"mx-2 \"\r\n                                                    [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n                                            </a>\r\n                                        </li>\r\n\r\n                                    </ul>\r\n\r\n                                </div>\r\n\r\n                                <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n                                    <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\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\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n                                                Name:</h3>\r\n                                            <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n                                            </h3>\r\n\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 section of checklist.questionAnswer\">\r\n\r\n                                            <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n                                                <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n                                                    <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n                                                        (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                        View in detail\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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n                                                                stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                        </svg>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"row w-100 m-3\" >\r\n\r\n                                                    <div class=\"col-md-1\" style=\"width:3.3333%\"  *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n                                                        <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                            [disabled]=\"question.redo&&question.task\"\r\n                                                            (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n                                                            class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n                                                            type=\"checkbox\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle\">\r\n                                                        {{checklist?.storeProfile?.storeName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n                                                        Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n                                                        {{checklist?.checklistInfo?.date}}\r\n                                                        {{checklist?.checklistInfo?.time}}\r\n                                                    </div>\r\n                                                </div>\r\n                                                <ul>\r\n                                                    <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n                                                        {{question?.qname}}</li>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <!-- checklist type with single image but inside collage-grid -->\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                                    <div class=\"collage-grid\">\r\n\r\n                                                                        <div class=\"collage-tile\">\r\n                                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                                alt=\"\">\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <!-- </div>\r\n                                                                <div class=\"col-md-6\"> -->\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <!-- <br> -->\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='time'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='date'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <br\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\"\r\n                                                                *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 cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div\r\n                                                                    [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <span class=\"remarksTxt\"\r\n                                                                    *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                    Answer :{{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div class=\"Partially my-3 px-5\"\r\n                                                            *ngFor=\"let item of question.userAnswer\">\r\n                                                            <span class=\"mt-3\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo  cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n\r\n\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\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                                                        <!-- Task: Multiple reference images (Array) -->\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image\r\n                                                            </div>\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"isValidImage(item)\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                            alt=\"Reference image\">\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n\r\n                                                        <!-- Checklist: Single reference image (String) -->\r\n                                                        <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n                                                                <div class=\"collage-tile\">\r\n                                                                    <img class=\"cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                        [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n                                                            <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                                            <div class=\"position-relative w-100 h-450px p-3\">\r\n                                                                <video controls class=\"w-100 h-100\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                                </video>\r\n\r\n\r\n                                                                <span\r\n                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                    <svg (click)=\"downloadVideo(item.answer)\"\r\n                                                                        title=\"Download Video\" id=\"download-icon\"\r\n                                                                        width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        class=\"icon-overlay\">\r\n                                                                        <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                            <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n                                                                                rx=\"8\" fill=\"white\"></rect>\r\n                                                                            <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n                                                                                rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n                                                                            <path\r\n                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                                                stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\"></path>\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n                                                                                y=\"0\" width=\"44\" height=\"44\"\r\n                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                <feFlood flood-opacity=\"0\"\r\n                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                </feFlood>\r\n                                                                                <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                    type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                    result=\"hardAlpha\"></feColorMatrix>\r\n                                                                                <feOffset dy=\"1\"></feOffset>\r\n                                                                                <feGaussianBlur stdDeviation=\"1\">\r\n                                                                                </feGaussianBlur>\r\n                                                                                <feColorMatrix type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                </feColorMatrix>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                </feBlend>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in=\"SourceGraphic\"\r\n                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                    result=\"shape\"></feBlend>\r\n                                                                            </filter>\r\n                                                                        </defs>\r\n                                                                    </svg>\r\n                                                                </span>\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6 dfdsfsd\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3 \"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n                                                </ul>\r\n\r\n\r\n                                                <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n                                                    role=\"dialog\" style=\"overflow:hidden\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n                                                                <!-- Prev Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n                                                                    (click)=\"navigateImage('prev')\"\r\n                                                                    [disabled]=\"currentImageIndex === 0\">\r\n                                                                    \u2039\r\n                                                                </button>\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n                                                                <!-- Next Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n                                                                    (click)=\"navigateImage('next')\"\r\n                                                                    [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n                                                                    \u203A\r\n                                                                </button>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-md-6 text-start\">\r\n                                                        <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button>                                           -->\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 text-end\">\r\n                                                        <button class=\"btn btn-sm btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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 btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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\"\r\n                                                            *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <path\r\n                                                                    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\"\r\n                                                                    stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Create Task</span>\r\n                                                        </button>\r\n                                                        <button\r\n                                                            *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n                                                            class=\"btn btn-sm border-val1\"\r\n                                                            (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n                                                                class=\"font-task\">View Task</span></button>\r\n\r\n\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=\"imageChecklist.includes(select)\">\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\r\n                                <div class=\" my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n                                            <h3 class=\"uni-title\">Average Downtime</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n                                            <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 qa-bodrer\">\r\n                                        <!-- <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li> -->\r\n\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\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\"> {{this.checklistName}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_count}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_license_id}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n                                                                Time:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_person_count\">Number of\r\n                                                                People Interacted :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_person_count}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.car_reg_number}}</span></span>\r\n                                                        </div>\r\n\r\n                                                    </div>\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n                                                                spent:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_duration_in_secs}}\r\n                                                                    Mins</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n                                                    <div class=\"row\">\r\n\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.slot_id}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"mt-2\">\r\n                                                    <img class=\"w-100 h-500px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n                                                        alt=\"\">\r\n                                                    <div class=\"text-center mt-3\"> {{this.checklistName}}</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=\"videoChecklist.includes(select)\">\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                                <div class=\"my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 margin-top-side\">\r\n                                        <li class=\"qa-heading\">\r\n\r\n                                        </li>\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n                                                <div class=\"row px-10 mt-5 margin-left-side\"\r\n                                                    *ngIf=\"select!=='suspiciousactivity'\">\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <h3 class=\"uni-title\">Detection Status</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <p class=\"uni-subtitle\">:<span\r\n                                                                class=\"ms-3 badge badge-light-danger\"\r\n                                                                *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <h3 class=\"uni-title\">Date</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <h3 class=\"uni-title\">Configured Time</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <h3 class=\"uni-title\">Duration</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <h3 class=\"uni-title\">Downtime</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n                                                                ngbTooltip=\"Downtime may result in inaccurate data\"\r\n                                                                placement=\"top\" container=\"body\"><svg\r\n                                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n                                                                    height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n                                                                    <path\r\n                                                                        d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n                                                                        stroke=\"#667085\" stroke-width=\"1.33333\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg></span></p>\r\n                                                    </div>\r\n                                                </div>\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\"\r\n                                                            *ngIf=\"detection?.customer_id\">Cust ID :\r\n                                                            {{detection.customer_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.queue_id\">Queue ID :\r\n                                                            {{detection.queue_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.optum_id\">Optom ID :\r\n                                                            {{detection.optum_id}}</span>\r\n                                                        <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n                                                        <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.temp_id\">TempId :\r\n                                                            {{detection.temp_id}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.time_spend\">Timespend :\r\n                                                            {{detection.time_spend}}Mins</span>\r\n\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\"\r\n                                                                *ngIf=\"detection?.entry_time\">Entry time :\r\n                                                                {{detection.entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.exit_time\">Exit time :\r\n                                                                {{detection.exit_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n                                                                {{detection.adherence_rate}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n                                                                *ngIf=\"detection?.category\">\r\n                                                                {{detection.category}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n                                                                {{detection.customer_entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n                                                                {{detection.customer_exit_time}}</span>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n                                                <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n                                                        alt=\"\">\r\n                                                    </video>\r\n                                                </div>\r\n                                                <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.EyeTestCDN}}{{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=\"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\">\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\">: {{this.checklistName}} </p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n                                    <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n                                        <div class=\"row px-10 mt-5 margin-left-side \">\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Detection Status</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n                                                        *ngIf=\"item?.Flag\">Breached</span>\r\n                                                    <span class=\"ms-3 badge badge-light-success\"\r\n                                                        *ngIf=\"!item?.Flag\">Not-breached</span>\r\n                                                </p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Date</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"snapcard\">\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\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n                                                            alt=\"open close snap\">\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}} -\r\n                                                                        {{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\"\r\n                                                        *ngIf=\"!item.closeTime\">\r\n                                                        <div\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/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 mt-2\">\r\n                                                                <div>\r\n                                                                    <div class=\"snaptext\">Closing Snap</div>\r\n                                                                    <div class=\"snaptime\">{{item.closeTime}} -\r\n                                                                        {{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                                        </div>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n                                </div>\r\n\r\n                            </div>\r\n                            <div *ngIf=\"boximageChecklist.includes(select)\">\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=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\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\">{{store?.storeName}} |\r\n                                                {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-9\">\r\n                                            <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <h3 class=\"uni-title\">Description:</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100 \">\r\n                                        <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n                                            <div class=\"card bordercolor bg-secondary mt-8\">\r\n                                                <div class=\"text-start ms-5 mt-2 mb-5\">\r\n                                                    <div *ngIf=\"item.zone\">\r\n                                                        <span\r\n                                                            class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n                                                </div>\r\n                                                <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n                            <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n                                [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n                                [pageSize]=\"limit\" (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\"\r\n                        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</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n    <div class=\"col-md-12  text-end\">\r\n        <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n        </button>\r\n    </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-8\">\r\n        <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n            <div>\r\n                <div class=\"text-start mt-2\">\r\n                    <div *ngIf=\"viewImage.zone\">\r\n                        <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.emptyBoxCount\">\r\n                        <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"viewImage.entry_time\">\r\n                        <span>Entry Time : {{viewImage.entry_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.exit_time\">\r\n                        <span>Exit Time : {{viewImage.exit_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.temp_id\">\r\n                        <span>Temp Id : {{viewImage.temp_id}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.time_spend\">\r\n                        <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n                    </div>\r\n\r\n                    <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n                        <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n                            {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n                    </div>\r\n                    <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n                </div>\r\n\r\n            </div>\r\n            <div data-bs-dismiss=\"modal\">\r\n                <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X  {{camera.width}}</span> -->\r\n                <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n                        width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n            <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</ng-template>", 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:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}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:14px!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;width:220Px}.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:contain!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}.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}.border-primary1{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:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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.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.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: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "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"] }, { kind: "component", type: CustomsingleSelectComponent, selector: "lib-single-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n    <!-- toast card starts -->\r\n    <div class=\"toastcard col-md-12 mb-4\">\r\n        <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n            <span class=\"align-items-start\">\r\n                <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <path\r\n                                d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n                        </svg>\r\n                    </span>New Detection Found! Refresh Now to view new detection</span>\r\n            </span>\r\n            <button (click)=\"refreshnow()\" type=\"button\"\r\n                class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n                    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_12165_62781)\">\r\n                        <path\r\n                            d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_12165_62781\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\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'\" [opens]=\"'right'\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n                                (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [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-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n                            [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n                            [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n\r\n                        <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n                                Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n                                Select Teams\r\n                            </div>\r\n                            <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                                Select Stores\r\n                            </div>\r\n                            <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [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-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n                                Select users\r\n                            </div>\r\n                            <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('userList')?.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                            <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"adults\">Adults</option>\r\n                                    <option value=\"kids\">Kids</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"rejected\">Breached</option>\r\n                                    <option value=\"approved\">Not-breached</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n                                <div class=\"select-wrapper\">\r\n                                    <div class=\"placeholder-overlay\"\r\n                                        *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n                                        Select Zone\r\n                                    </div>\r\n                                    <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                        [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n                                        [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n                                <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n                                    [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"Approved\">Approved</option>\r\n                                    <option value=\"notapproved\">Not-Approved</option>\r\n                                </select>\r\n                            </div>\r\n                            <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n                                <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n                            </span>\r\n                            <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n                                <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n                            </span>\r\n\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                            <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</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=\"card my-2\">\r\n    <div class=\"row main-container my-5 \">\r\n\r\n        <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n            <div class=\"position-relative h-650px scroll-y\">\r\n                <div class=\"card-body p-5\">\r\n                    <div class=\"checklist-left\">\r\n                        <div class=\"checklist-title\">{{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&&select === 'custom' || noData&&select === 'task'\" 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-75 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\r\n                    <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20 mb-3\">\r\n                            <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No Detections found</div>\r\n                                <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\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\"\r\n                                    *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    (click)=\"onchecklistreset()\"> Reset </button>\r\n                                <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    class=\"btn btn-primary w-25  btn-resize\"\r\n                                    (click)=\"selectsinglequestion()\">Apply</button>\r\n                            </div>\r\n                            <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n                                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\"\r\n                                    style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n                                    <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n                                        {{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;\"\r\n                                            class=\"d-flex my-2 q-btn\" cdkDrag>\r\n                                            <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                (click)=\"selectedQuestion($event,section,question)\"\r\n                                                class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n                                            <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n                                                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=\"combinedChecklist.includes(select)\">\r\n                            <div class=\"text-end mt-10\">\r\n                                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n                                </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 \"\r\n                                    [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                                    <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n                                        [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n                                        [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)\"\r\n                                        [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                        <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n                                            type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                        <label for=\"label{{i}}\"\r\n                                            [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n                                        <span class=\"badge badge-light-primary detectionright\"\r\n                                            *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\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n            <div class=\"position-relative \">\r\n                <div class=\"card-header border-0  px-0 my-0\"\r\n                    *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n                    <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!approvalStatus\"></h3>\r\n                    \r\n                    <div class=\" m-3\"\r\n                        *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n                        <div class=\"form-check\">\r\n                            <input [(ngModel)]=\"selectAllTask\"\r\n                                (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n                                class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                            <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n                                Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n                            </label>\r\n                        </div>\r\n\r\n\r\n\r\n                    </div>\r\n                    <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n                        <div class=\"me-4\"  *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n                          <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('task')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46304)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <path d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span> \r\n                          \r\n                        </div>\r\n                        \r\n                        <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n                                <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('redo')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46303)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <g clip-path=\"url(#clip0_12998_46303)\">\r\n                                    <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    <clipPath id=\"clip0_12998_46303\">\r\n                                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n                                    </clipPath>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                \r\n\r\n                        </div>\r\n                        <div class=\"position-relative cursor-pointer me-10\">\r\n                            <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                                {{ exportLabel }} <!-- Bind label text here -->\r\n                            </div>\r\n                            <div *ngIf=\"exportShow\"\r\n                                class=\"card py-2  position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n                                <ul class=\"list-unstyled mb-2\">\r\n                                    <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n                                        *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                                        Export as PDF\r\n                                    </li>\r\n                                    <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n                                        *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                                        Export as CSV\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n                                        class=\" cursor-pointer checkbox-label py-4  mx-2\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                                        Export as PPT\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n                                        class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n                                        (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\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\r\n                        <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                    <div class=\"nodata-title\">No Detections found</div>\r\n                                    <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 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\">\r\n                                    {{this.selectedSection[0]?.questions[0]}}</div>\r\n                                <div *ngIf=\"showsingle&&showfilter\">\r\n                                    <ul\r\n                                        class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                        <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n                                            <a (click)=\"taskTab(item)\"\r\n                                                [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n                                                class=\"nav-link cursor-pointer no-border me-3\">\r\n                                                {{item.key}}<span class=\"mx-2 \"\r\n                                                    [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n                                            </a>\r\n                                        </li>\r\n\r\n                                    </ul>\r\n\r\n                                </div>\r\n\r\n                                <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n                                    <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\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\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n                                                Name:</h3>\r\n                                            <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n                                            </h3>\r\n\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 section of checklist.questionAnswer\">\r\n\r\n                                            <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n                                                <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n                                                    <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n                                                        (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                        View in detail\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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n                                                                stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                        </svg>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"row w-100 m-3\" >\r\n\r\n                                                    <div class=\"col-md-1\" style=\"width:3.3333%\"  *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n                                                        <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                            [disabled]=\"question.redo&&question.task\"\r\n                                                            (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n                                                            class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n                                                            type=\"checkbox\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                                                        {{checklist?.storeProfile?.storeName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                                                        {{checklist?.storeProfile?.userName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n                                                        Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n                                                        {{checklist?.checklistInfo?.date}}\r\n                                                        {{checklist?.checklistInfo?.time}}\r\n                                                    </div>\r\n                                                </div>\r\n                                                <ul>\r\n                                                    <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n                                                        {{question?.qname}}</li>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <!-- checklist type with single image but inside collage-grid -->\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                                    <div class=\"collage-grid\">\r\n\r\n                                                                        <div class=\"collage-tile\">\r\n                                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                                alt=\"\">\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <!-- </div>\r\n                                                                <div class=\"col-md-6\"> -->\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <!-- <br> -->\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='time'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='date'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <br\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\"\r\n                                                                *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 cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div\r\n                                                                    [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <span class=\"remarksTxt\"\r\n                                                                    *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                    Answer :{{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div class=\"Partially my-3 px-5\"\r\n                                                            *ngFor=\"let item of question.userAnswer\">\r\n                                                            <span class=\"mt-3\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo  cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n\r\n\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\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                                                        <!-- Task: Multiple reference images (Array) -->\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image\r\n                                                            </div>\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"isValidImage(item)\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                            alt=\"Reference image\">\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n\r\n                                                        <!-- Checklist: Single reference image (String) -->\r\n                                                        <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n                                                                <div class=\"collage-tile\">\r\n                                                                    <img class=\"cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                        [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n                                                            <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                                            <div class=\"position-relative w-100 h-450px p-3\">\r\n                                                                <video controls class=\"w-100 h-100\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                                </video>\r\n\r\n\r\n                                                                <span\r\n                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                    <svg (click)=\"downloadVideo(item.answer)\"\r\n                                                                        title=\"Download Video\" id=\"download-icon\"\r\n                                                                        width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        class=\"icon-overlay\">\r\n                                                                        <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                            <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n                                                                                rx=\"8\" fill=\"white\"></rect>\r\n                                                                            <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n                                                                                rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n                                                                            <path\r\n                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                                                stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\"></path>\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n                                                                                y=\"0\" width=\"44\" height=\"44\"\r\n                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                <feFlood flood-opacity=\"0\"\r\n                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                </feFlood>\r\n                                                                                <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                    type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                    result=\"hardAlpha\"></feColorMatrix>\r\n                                                                                <feOffset dy=\"1\"></feOffset>\r\n                                                                                <feGaussianBlur stdDeviation=\"1\">\r\n                                                                                </feGaussianBlur>\r\n                                                                                <feColorMatrix type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                </feColorMatrix>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                </feBlend>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in=\"SourceGraphic\"\r\n                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                    result=\"shape\"></feBlend>\r\n                                                                            </filter>\r\n                                                                        </defs>\r\n                                                                    </svg>\r\n                                                                </span>\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6 dfdsfsd\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3 \"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n                                                </ul>\r\n\r\n\r\n                                                <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n                                                    role=\"dialog\" style=\"overflow:hidden\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n                                                                <!-- Prev Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n                                                                    (click)=\"navigateImage('prev')\"\r\n                                                                    [disabled]=\"currentImageIndex === 0\">\r\n                                                                    \u2039\r\n                                                                </button>\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n                                                                <!-- Next Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n                                                                    (click)=\"navigateImage('next')\"\r\n                                                                    [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n                                                                    \u203A\r\n                                                                </button>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-md-6 text-start\">\r\n                                                        <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button>                                           -->\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 text-end\">\r\n                                                        <button class=\"btn btn-sm btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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 btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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\"\r\n                                                            *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <path\r\n                                                                    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\"\r\n                                                                    stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Create Task</span>\r\n                                                        </button>\r\n                                                        <button\r\n                                                            *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n                                                            class=\"btn btn-sm border-val1\"\r\n                                                            (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n                                                                class=\"font-task\">View Task</span></button>\r\n\r\n\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=\"imageChecklist.includes(select)\">\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\r\n                                <div class=\" my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n                                            <h3 class=\"uni-title\">Average Downtime</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n                                            <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 qa-bodrer\">\r\n                                        <!-- <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li> -->\r\n\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\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\"> {{this.checklistName}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_count}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_license_id}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n                                                                Time:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_person_count\">Number of\r\n                                                                People Interacted :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_person_count}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.car_reg_number}}</span></span>\r\n                                                        </div>\r\n\r\n                                                    </div>\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n                                                                spent:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_duration_in_secs}}\r\n                                                                    Mins</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n                                                    <div class=\"row\">\r\n\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.slot_id}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"mt-2\">\r\n                                                    <img class=\"w-100 h-500px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n                                                        alt=\"\">\r\n                                                    <div class=\"text-center mt-3\"> {{this.checklistName}}</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=\"videoChecklist.includes(select)\">\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                                <div class=\"my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 margin-top-side\">\r\n                                        <li class=\"qa-heading\">\r\n\r\n                                        </li>\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n                                                <div class=\"row px-10 mt-5 margin-left-side\"\r\n                                                    *ngIf=\"select!=='suspiciousactivity'\">\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <h3 class=\"uni-title\">Detection Status</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <p class=\"uni-subtitle\">:<span\r\n                                                                class=\"ms-3 badge badge-light-danger\"\r\n                                                                *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <h3 class=\"uni-title\">Date</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <h3 class=\"uni-title\">Configured Time</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <h3 class=\"uni-title\">Duration</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <h3 class=\"uni-title\">Downtime</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n                                                                ngbTooltip=\"Downtime may result in inaccurate data\"\r\n                                                                placement=\"top\" container=\"body\"><svg\r\n                                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n                                                                    height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n                                                                    <path\r\n                                                                        d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n                                                                        stroke=\"#667085\" stroke-width=\"1.33333\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg></span></p>\r\n                                                    </div>\r\n                                                </div>\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\"\r\n                                                            *ngIf=\"detection?.customer_id\">Cust ID :\r\n                                                            {{detection.customer_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.queue_id\">Queue ID :\r\n                                                            {{detection.queue_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.optum_id\">Optom ID :\r\n                                                            {{detection.optum_id}}</span>\r\n                                                        <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n                                                        <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.temp_id\">TempId :\r\n                                                            {{detection.temp_id}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.time_spend\">Timespend :\r\n                                                            {{detection.time_spend}}Mins</span>\r\n\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\"\r\n                                                                *ngIf=\"detection?.entry_time\">Entry time :\r\n                                                                {{detection.entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.exit_time\">Exit time :\r\n                                                                {{detection.exit_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n                                                                {{detection.adherence_rate}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n                                                                *ngIf=\"detection?.category\">\r\n                                                                {{detection.category}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n                                                                {{detection.customer_entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n                                                                {{detection.customer_exit_time}}</span>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n                                                <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n                                                        alt=\"\">\r\n                                                    </video>\r\n                                                </div>\r\n                                                <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.EyeTestCDN}}{{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=\"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\">\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\">: {{this.checklistName}} </p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n                                    <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n                                        <div class=\"row px-10 mt-5 margin-left-side \">\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Detection Status</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n                                                        *ngIf=\"item?.Flag\">Breached</span>\r\n                                                    <span class=\"ms-3 badge badge-light-success\"\r\n                                                        *ngIf=\"!item?.Flag\">Not-breached</span>\r\n                                                </p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Date</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"snapcard\">\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\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n                                                            alt=\"open close snap\">\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}} -\r\n                                                                        {{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\"\r\n                                                        *ngIf=\"!item.closeTime\">\r\n                                                        <div\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/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 mt-2\">\r\n                                                                <div>\r\n                                                                    <div class=\"snaptext\">Closing Snap</div>\r\n                                                                    <div class=\"snaptime\">{{item.closeTime}} -\r\n                                                                        {{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                                        </div>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n                                </div>\r\n\r\n                            </div>\r\n                            <div *ngIf=\"boximageChecklist.includes(select)\">\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=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\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\">{{store?.storeName}} |\r\n                                                {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-9\">\r\n                                            <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <h3 class=\"uni-title\">Description:</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100 \">\r\n                                        <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n                                            <div class=\"card bordercolor bg-secondary mt-8\">\r\n                                                <div class=\"text-start ms-5 mt-2 mb-5\">\r\n                                                    <div *ngIf=\"item.zone\">\r\n                                                        <span\r\n                                                            class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n                                                </div>\r\n                                                <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n                            <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n                                [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n                                [pageSize]=\"limit\" (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\"\r\n                        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</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n    <div class=\"col-md-12  text-end\">\r\n        <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n        </button>\r\n    </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-8\">\r\n        <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n            <div>\r\n                <div class=\"text-start mt-2\">\r\n                    <div *ngIf=\"viewImage.zone\">\r\n                        <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.emptyBoxCount\">\r\n                        <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"viewImage.entry_time\">\r\n                        <span>Entry Time : {{viewImage.entry_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.exit_time\">\r\n                        <span>Exit Time : {{viewImage.exit_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.temp_id\">\r\n                        <span>Temp Id : {{viewImage.temp_id}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.time_spend\">\r\n                        <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n                    </div>\r\n\r\n                    <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n                        <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n                            {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n                    </div>\r\n                    <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n                </div>\r\n\r\n            </div>\r\n            <div data-bs-dismiss=\"modal\">\r\n                <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X  {{camera.width}}</span> -->\r\n                <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n                        width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n            <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</ng-template>", 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:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}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:14px!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;width:220Px}.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:contain!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}.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}.border-primary1{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:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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.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.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: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "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"] }, { kind: "component", type: CustomsingleSelectComponent, selector: "lib-single-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-gallery', template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n    <!-- toast card starts -->\r\n    <div class=\"toastcard col-md-12 mb-4\">\r\n        <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n            <span class=\"align-items-start\">\r\n                <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <path\r\n                                d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n                        </svg>\r\n                    </span>New Detection Found! Refresh Now to view new detection</span>\r\n            </span>\r\n            <button (click)=\"refreshnow()\" type=\"button\"\r\n                class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n                    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_12165_62781)\">\r\n                        <path\r\n                            d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_12165_62781\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\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'\" [opens]=\"'right'\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n                                (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [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-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n                            [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n                            [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n\r\n                        <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n                                Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n                                Select Teams\r\n                            </div>\r\n                            <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                                Select Stores\r\n                            </div>\r\n                            <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [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-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n                                Select users\r\n                            </div>\r\n                            <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('userList')?.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                            <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"adults\">Adults</option>\r\n                                    <option value=\"kids\">Kids</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"rejected\">Breached</option>\r\n                                    <option value=\"approved\">Not-breached</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n                                <div class=\"select-wrapper\">\r\n                                    <div class=\"placeholder-overlay\"\r\n                                        *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n                                        Select Zone\r\n                                    </div>\r\n                                    <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                        [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n                                        [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n                                <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n                                    [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"Approved\">Approved</option>\r\n                                    <option value=\"notapproved\">Not-Approved</option>\r\n                                </select>\r\n                            </div>\r\n                            <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n                                <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n                            </span>\r\n                            <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n                                <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n                            </span>\r\n\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                            <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</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=\"card my-2\">\r\n    <div class=\"row main-container my-5 \">\r\n\r\n        <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n            <div class=\"position-relative h-650px scroll-y\">\r\n                <div class=\"card-body p-5\">\r\n                    <div class=\"checklist-left\">\r\n                        <div class=\"checklist-title\">{{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&&select === 'custom' || noData&&select === 'task'\" 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-75 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\r\n                    <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20 mb-3\">\r\n                            <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No Detections found</div>\r\n                                <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\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\"\r\n                                    *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    (click)=\"onchecklistreset()\"> Reset </button>\r\n                                <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    class=\"btn btn-primary w-25  btn-resize\"\r\n                                    (click)=\"selectsinglequestion()\">Apply</button>\r\n                            </div>\r\n                            <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n                                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\"\r\n                                    style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n                                    <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n                                        {{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;\"\r\n                                            class=\"d-flex my-2 q-btn\" cdkDrag>\r\n                                            <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                (click)=\"selectedQuestion($event,section,question)\"\r\n                                                class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n                                            <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n                                                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=\"combinedChecklist.includes(select)\">\r\n                            <div class=\"text-end mt-10\">\r\n                                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n                                </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 \"\r\n                                    [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                                    <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n                                        [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n                                        [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)\"\r\n                                        [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                        <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n                                            type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                        <label for=\"label{{i}}\"\r\n                                            [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n                                        <span class=\"badge badge-light-primary detectionright\"\r\n                                            *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\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n            <div class=\"position-relative \">\r\n                <div class=\"card-header border-0  px-0 my-0\"\r\n                    *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n                    <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n                    \r\n                    <div class=\" m-3\"\r\n                        *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n                        <div class=\"form-check\">\r\n                            <input [(ngModel)]=\"selectAllTask\"\r\n                                (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n                                class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                            <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n                                Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n                            </label>\r\n                        </div>\r\n\r\n\r\n\r\n                    </div>\r\n                    <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n                        <div class=\"me-4\"  *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n                          <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('task')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46304)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <path d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span> \r\n                          \r\n                        </div>\r\n                        \r\n                        <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n                                <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('redo')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46303)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <g clip-path=\"url(#clip0_12998_46303)\">\r\n                                    <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    <clipPath id=\"clip0_12998_46303\">\r\n                                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n                                    </clipPath>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                \r\n\r\n                        </div>\r\n                        <div class=\"position-relative cursor-pointer me-10\">\r\n                            <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                                {{ exportLabel }} <!-- Bind label text here -->\r\n                            </div>\r\n                            <div *ngIf=\"exportShow\"\r\n                                class=\"card py-2  position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n                                <ul class=\"list-unstyled mb-2\">\r\n                                    <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n                                        *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                                        Export as PDF\r\n                                    </li>\r\n                                    <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n                                        *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                                        Export as CSV\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n                                        class=\" cursor-pointer checkbox-label py-4  mx-2\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                                        Export as PPT\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n                                        class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n                                        (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\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\r\n                        <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                    <div class=\"nodata-title\">No Detections found</div>\r\n                                    <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 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\">\r\n                                    {{this.selectedSection[0]?.questions[0]}}</div>\r\n                                <div *ngIf=\"showsingle&&showfilter\">\r\n                                    <ul\r\n                                        class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                        <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n                                            <a (click)=\"taskTab(item)\"\r\n                                                [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n                                                class=\"nav-link cursor-pointer no-border me-3\">\r\n                                                {{item.key}}<span class=\"mx-2 \"\r\n                                                    [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n                                            </a>\r\n                                        </li>\r\n\r\n                                    </ul>\r\n\r\n                                </div>\r\n\r\n                                <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n                                    <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\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\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n                                                Name:</h3>\r\n                                            <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n                                            </h3>\r\n\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 section of checklist.questionAnswer\">\r\n\r\n                                            <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n                                                <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n                                                    <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n                                                        (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                        View in detail\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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n                                                                stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                        </svg>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"row w-100 m-3\" >\r\n\r\n                                                    <div class=\"col-md-1\" style=\"width:3.3333%\"  *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n                                                        <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                            [disabled]=\"question.redo&&question.task\"\r\n                                                            (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n                                                            class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n                                                            type=\"checkbox\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle\">\r\n                                                        {{checklist?.storeProfile?.storeName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n                                                        Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n                                                        {{checklist?.checklistInfo?.date}}\r\n                                                        {{checklist?.checklistInfo?.time}}\r\n                                                    </div>\r\n                                                </div>\r\n                                                <ul>\r\n                                                    <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n                                                        {{question?.qname}}</li>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <!-- checklist type with single image but inside collage-grid -->\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                                    <div class=\"collage-grid\">\r\n\r\n                                                                        <div class=\"collage-tile\">\r\n                                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                                alt=\"\">\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <!-- </div>\r\n                                                                <div class=\"col-md-6\"> -->\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <!-- <br> -->\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='time'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='date'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <br\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\"\r\n                                                                *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 cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div\r\n                                                                    [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <span class=\"remarksTxt\"\r\n                                                                    *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                    Answer :{{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div class=\"Partially my-3 px-5\"\r\n                                                            *ngFor=\"let item of question.userAnswer\">\r\n                                                            <span class=\"mt-3\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo  cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n\r\n\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\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                                                        <!-- Task: Multiple reference images (Array) -->\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image\r\n                                                            </div>\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"isValidImage(item)\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                            alt=\"Reference image\">\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n\r\n                                                        <!-- Checklist: Single reference image (String) -->\r\n                                                        <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n                                                                <div class=\"collage-tile\">\r\n                                                                    <img class=\"cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                        [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n                                                            <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                                            <div class=\"position-relative w-100 h-450px p-3\">\r\n                                                                <video controls class=\"w-100 h-100\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                                </video>\r\n\r\n\r\n                                                                <span\r\n                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                    <svg (click)=\"downloadVideo(item.answer)\"\r\n                                                                        title=\"Download Video\" id=\"download-icon\"\r\n                                                                        width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        class=\"icon-overlay\">\r\n                                                                        <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                            <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n                                                                                rx=\"8\" fill=\"white\"></rect>\r\n                                                                            <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n                                                                                rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n                                                                            <path\r\n                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                                                stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\"></path>\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n                                                                                y=\"0\" width=\"44\" height=\"44\"\r\n                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                <feFlood flood-opacity=\"0\"\r\n                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                </feFlood>\r\n                                                                                <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                    type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                    result=\"hardAlpha\"></feColorMatrix>\r\n                                                                                <feOffset dy=\"1\"></feOffset>\r\n                                                                                <feGaussianBlur stdDeviation=\"1\">\r\n                                                                                </feGaussianBlur>\r\n                                                                                <feColorMatrix type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                </feColorMatrix>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                </feBlend>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in=\"SourceGraphic\"\r\n                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                    result=\"shape\"></feBlend>\r\n                                                                            </filter>\r\n                                                                        </defs>\r\n                                                                    </svg>\r\n                                                                </span>\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6 dfdsfsd\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3 \"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n                                                </ul>\r\n\r\n\r\n                                                <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n                                                    role=\"dialog\" style=\"overflow:hidden\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n                                                                <!-- Prev Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n                                                                    (click)=\"navigateImage('prev')\"\r\n                                                                    [disabled]=\"currentImageIndex === 0\">\r\n                                                                    \u2039\r\n                                                                </button>\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n                                                                <!-- Next Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n                                                                    (click)=\"navigateImage('next')\"\r\n                                                                    [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n                                                                    \u203A\r\n                                                                </button>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-md-6 text-start\">\r\n                                                        <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button>                                           -->\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 text-end\">\r\n                                                        <button class=\"btn btn-sm btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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 btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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\"\r\n                                                            *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <path\r\n                                                                    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\"\r\n                                                                    stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Create Task</span>\r\n                                                        </button>\r\n                                                        <button\r\n                                                            *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n                                                            class=\"btn btn-sm border-val1\"\r\n                                                            (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n                                                                class=\"font-task\">View Task</span></button>\r\n\r\n\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=\"imageChecklist.includes(select)\">\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\r\n                                <div class=\" my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n                                            <h3 class=\"uni-title\">Average Downtime</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n                                            <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 qa-bodrer\">\r\n                                        <!-- <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li> -->\r\n\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\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\"> {{this.checklistName}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_count}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_license_id}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n                                                                Time:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_person_count\">Number of\r\n                                                                People Interacted :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_person_count}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.car_reg_number}}</span></span>\r\n                                                        </div>\r\n\r\n                                                    </div>\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n                                                                spent:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_duration_in_secs}}\r\n                                                                    Mins</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n                                                    <div class=\"row\">\r\n\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.slot_id}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"mt-2\">\r\n                                                    <img class=\"w-100 h-500px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n                                                        alt=\"\">\r\n                                                    <div class=\"text-center mt-3\"> {{this.checklistName}}</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=\"videoChecklist.includes(select)\">\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                                <div class=\"my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 margin-top-side\">\r\n                                        <li class=\"qa-heading\">\r\n\r\n                                        </li>\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n                                                <div class=\"row px-10 mt-5 margin-left-side\"\r\n                                                    *ngIf=\"select!=='suspiciousactivity'\">\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <h3 class=\"uni-title\">Detection Status</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <p class=\"uni-subtitle\">:<span\r\n                                                                class=\"ms-3 badge badge-light-danger\"\r\n                                                                *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <h3 class=\"uni-title\">Date</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <h3 class=\"uni-title\">Configured Time</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <h3 class=\"uni-title\">Duration</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <h3 class=\"uni-title\">Downtime</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n                                                                ngbTooltip=\"Downtime may result in inaccurate data\"\r\n                                                                placement=\"top\" container=\"body\"><svg\r\n                                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n                                                                    height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n                                                                    <path\r\n                                                                        d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n                                                                        stroke=\"#667085\" stroke-width=\"1.33333\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg></span></p>\r\n                                                    </div>\r\n                                                </div>\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\"\r\n                                                            *ngIf=\"detection?.customer_id\">Cust ID :\r\n                                                            {{detection.customer_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.queue_id\">Queue ID :\r\n                                                            {{detection.queue_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.optum_id\">Optom ID :\r\n                                                            {{detection.optum_id}}</span>\r\n                                                        <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n                                                        <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.temp_id\">TempId :\r\n                                                            {{detection.temp_id}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.time_spend\">Timespend :\r\n                                                            {{detection.time_spend}}Mins</span>\r\n\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\"\r\n                                                                *ngIf=\"detection?.entry_time\">Entry time :\r\n                                                                {{detection.entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.exit_time\">Exit time :\r\n                                                                {{detection.exit_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n                                                                {{detection.adherence_rate}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n                                                                *ngIf=\"detection?.category\">\r\n                                                                {{detection.category}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n                                                                {{detection.customer_entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n                                                                {{detection.customer_exit_time}}</span>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n                                                <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n                                                        alt=\"\">\r\n                                                    </video>\r\n                                                </div>\r\n                                                <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.EyeTestCDN}}{{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=\"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\">\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\">: {{this.checklistName}} </p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n                                    <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n                                        <div class=\"row px-10 mt-5 margin-left-side \">\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Detection Status</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n                                                        *ngIf=\"item?.Flag\">Breached</span>\r\n                                                    <span class=\"ms-3 badge badge-light-success\"\r\n                                                        *ngIf=\"!item?.Flag\">Not-breached</span>\r\n                                                </p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Date</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"snapcard\">\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\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n                                                            alt=\"open close snap\">\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}} -\r\n                                                                        {{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\"\r\n                                                        *ngIf=\"!item.closeTime\">\r\n                                                        <div\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/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 mt-2\">\r\n                                                                <div>\r\n                                                                    <div class=\"snaptext\">Closing Snap</div>\r\n                                                                    <div class=\"snaptime\">{{item.closeTime}} -\r\n                                                                        {{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                                        </div>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n                                </div>\r\n\r\n                            </div>\r\n                            <div *ngIf=\"boximageChecklist.includes(select)\">\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=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\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\">{{store?.storeName}} |\r\n                                                {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-9\">\r\n                                            <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <h3 class=\"uni-title\">Description:</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100 \">\r\n                                        <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n                                            <div class=\"card bordercolor bg-secondary mt-8\">\r\n                                                <div class=\"text-start ms-5 mt-2 mb-5\">\r\n                                                    <div *ngIf=\"item.zone\">\r\n                                                        <span\r\n                                                            class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n                                                </div>\r\n                                                <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n                            <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n                                [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n                                [pageSize]=\"limit\" (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\"\r\n                        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</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n    <div class=\"col-md-12  text-end\">\r\n        <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n        </button>\r\n    </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-8\">\r\n        <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n            <div>\r\n                <div class=\"text-start mt-2\">\r\n                    <div *ngIf=\"viewImage.zone\">\r\n                        <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.emptyBoxCount\">\r\n                        <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"viewImage.entry_time\">\r\n                        <span>Entry Time : {{viewImage.entry_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.exit_time\">\r\n                        <span>Exit Time : {{viewImage.exit_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.temp_id\">\r\n                        <span>Temp Id : {{viewImage.temp_id}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.time_spend\">\r\n                        <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n                    </div>\r\n\r\n                    <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n                        <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n                            {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n                    </div>\r\n                    <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n                </div>\r\n\r\n            </div>\r\n            <div data-bs-dismiss=\"modal\">\r\n                <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X  {{camera.width}}</span> -->\r\n                <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n                        width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n            <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</ng-template>", 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:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}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:14px!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;width:220Px}.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:contain!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}.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}.border-primary1{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:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"] }]
+            args: [{ selector: 'lib-gallery', template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n    <!-- toast card starts -->\r\n    <div class=\"toastcard col-md-12 mb-4\">\r\n        <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n            <span class=\"align-items-start\">\r\n                <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <path\r\n                                d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n                                fill=\"#00A3FF\" />\r\n                            <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n                        </svg>\r\n                    </span>New Detection Found! Refresh Now to view new detection</span>\r\n            </span>\r\n            <button (click)=\"refreshnow()\" type=\"button\"\r\n                class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n                    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_12165_62781)\">\r\n                        <path\r\n                            d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_12165_62781\">\r\n                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\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'\" [opens]=\"'right'\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n                                (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [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-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n                            [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n                            [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n                            [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n\r\n                        <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n                                Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n                                Select Teams\r\n                            </div>\r\n                            <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n                            </lib-group-select>\r\n                        </div>\r\n\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                                Select Stores\r\n                            </div>\r\n                            <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'storeName'\" [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-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n                                Select users\r\n                            </div>\r\n                            <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n                                [selectedValues]=\"galleryForm.get('userList')?.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                            <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"adults\">Adults</option>\r\n                                    <option value=\"kids\">Kids</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n                                <select class=\"form-select\" [(ngModel)]=\"category\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"rejected\">Breached</option>\r\n                                    <option value=\"approved\">Not-breached</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n                                <div class=\"select-wrapper\">\r\n                                    <div class=\"placeholder-overlay\"\r\n                                        *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n                                        Select Zone\r\n                                    </div>\r\n                                    <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n                                        [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n                                        [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n                                <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n                                    [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n                                    <option value=\"all\">All</option>\r\n                                    <option value=\"Approved\">Approved</option>\r\n                                    <option value=\"notapproved\">Not-Approved</option>\r\n                                </select>\r\n                            </div>\r\n                            <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n                                <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n                            </span>\r\n                            <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n                                <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                    class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n                            </span>\r\n\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                            <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</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=\"card my-2\">\r\n    <div class=\"row main-container my-5 \">\r\n\r\n        <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n            <div class=\"position-relative h-650px scroll-y\">\r\n                <div class=\"card-body p-5\">\r\n                    <div class=\"checklist-left\">\r\n                        <div class=\"checklist-title\">{{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&&select === 'custom' || noData&&select === 'task'\" 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-75 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\r\n                    <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20 mb-3\">\r\n                            <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No Detections found</div>\r\n                                <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\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\"\r\n                                    *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    (click)=\"onchecklistreset()\"> Reset </button>\r\n                                <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n                                    class=\"btn btn-primary w-25  btn-resize\"\r\n                                    (click)=\"selectsinglequestion()\">Apply</button>\r\n                            </div>\r\n                            <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n                                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\"\r\n                                    style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n                                    <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n                                        {{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;\"\r\n                                            class=\"d-flex my-2 q-btn\" cdkDrag>\r\n                                            <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                (click)=\"selectedQuestion($event,section,question)\"\r\n                                                class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n                                            <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n                                                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=\"combinedChecklist.includes(select)\">\r\n                            <div class=\"text-end mt-10\">\r\n                                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n                                </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 \"\r\n                                    [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                                    <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n                                        [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n                                        [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)\"\r\n                                        [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                        <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n                                            type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                        <label for=\"label{{i}}\"\r\n                                            [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n                                        <span class=\"badge badge-light-primary detectionright\"\r\n                                            *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\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n            <div class=\"position-relative \">\r\n                <div class=\"card-header border-0  px-0 my-0\"\r\n                    *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n                    <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!approvalStatus\"></h3>\r\n                    \r\n                    <div class=\" m-3\"\r\n                        *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n                        <div class=\"form-check\">\r\n                            <input [(ngModel)]=\"selectAllTask\"\r\n                                (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n                                class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                            <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n                                Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n                            </label>\r\n                        </div>\r\n\r\n\r\n\r\n                    </div>\r\n                    <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n                        <div class=\"me-4\"  *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n                          <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('task')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46304)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <path d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span> \r\n                          \r\n                        </div>\r\n                        \r\n                        <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n                                <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"  (click)=\"createMultipleTask('redo')\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n                                    <g filter=\"url(#filter0_d_12998_46303)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/>\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/>\r\n                                    <g clip-path=\"url(#clip0_12998_46303)\">\r\n                                    <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </g>\r\n                                    </g>\r\n                                    <defs>\r\n                                    <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n                                    <feOffset dy=\"1\"/>\r\n                                    <feGaussianBlur stdDeviation=\"1\"/>\r\n                                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n                                    </filter>\r\n                                    <clipPath id=\"clip0_12998_46303\">\r\n                                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n                                    </clipPath>\r\n                                    </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                \r\n\r\n                        </div>\r\n                        <div class=\"position-relative cursor-pointer me-10\">\r\n                            <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                                {{ exportLabel }} <!-- Bind label text here -->\r\n                            </div>\r\n                            <div *ngIf=\"exportShow\"\r\n                                class=\"card py-2  position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n                                <ul class=\"list-unstyled mb-2\">\r\n                                    <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n                                        *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                                        Export as PDF\r\n                                    </li>\r\n                                    <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n                                        *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                                        Export as CSV\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n                                        class=\" cursor-pointer checkbox-label py-4  mx-2\" type=\"button\"\r\n                                        (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                                        Export as PPT\r\n                                    </li>\r\n                                    <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n                                        class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n                                        (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\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\r\n                        <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n                                    <div class=\"nodata-title\">No Detections found</div>\r\n                                    <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n                            <div class=\"col-lg-12 mt-20 mb-3\">\r\n                                <div\r\n                                    class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src mt-5 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\">\r\n                                    {{this.selectedSection[0]?.questions[0]}}</div>\r\n                                <div *ngIf=\"showsingle&&showfilter\">\r\n                                    <ul\r\n                                        class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                        <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n                                            <a (click)=\"taskTab(item)\"\r\n                                                [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n                                                class=\"nav-link cursor-pointer no-border me-3\">\r\n                                                {{item.key}}<span class=\"mx-2 \"\r\n                                                    [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n                                            </a>\r\n                                        </li>\r\n\r\n                                    </ul>\r\n\r\n                                </div>\r\n\r\n                                <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n                                    <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\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\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n                                                Name:</h3>\r\n                                            <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n                                            </h3>\r\n\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 section of checklist.questionAnswer\">\r\n\r\n                                            <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n                                                <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n                                                    <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n                                                        (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                        View in detail\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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n                                                                stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                        </svg>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"row w-100 m-3\" >\r\n\r\n                                                    <div class=\"col-md-1\" style=\"width:3.3333%\"  *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n                                                        <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n                                                            [disabled]=\"question.redo&&question.task\"\r\n                                                            (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n                                                            class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n                                                            type=\"checkbox\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n                                                        {{checklist?.storeProfile?.storeName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3 text-title\" *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n                                                        {{checklist?.storeProfile?.userName}}\r\n                                                    </div>\r\n                                                    <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n                                                        Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n                                                        {{checklist?.checklistInfo?.date}}\r\n                                                        {{checklist?.checklistInfo?.time}}\r\n                                                    </div>\r\n                                                </div>\r\n                                                <ul>\r\n                                                    <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n                                                        {{question?.qname}}</li>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <!-- checklist type with single image but inside collage-grid -->\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                                    <div class=\"collage-grid\">\r\n\r\n                                                                        <div class=\"collage-tile\">\r\n                                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                                alt=\"\">\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <!-- </div>\r\n                                                                <div class=\"col-md-6\"> -->\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <!-- <br> -->\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"Partially my-3 px-5\"\r\n                                                        *ngIf=\"question?.answerType==='time'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='date'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <br>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n                                                            <div class=\"col-md-6\"\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <img class=\"img-logo cursor-pointer\"\r\n                                                                    (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                    alt=\"\">\r\n                                                            </div>\r\n                                                            <br\r\n                                                                *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n                                                            <div class=\"col-md-6\">\r\n                                                                <!-- Question Reference Images -->\r\n                                                                <ng-container\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                            <div class=\"collage-tile\"\r\n                                                                                *ngIf=\"isValidImage(item)\">\r\n                                                                                <img class=\"cursor-pointer\"\r\n                                                                                    (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                    alt=\"Reference image\">\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                            <span class=\"mt-4\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\"\r\n                                                                *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 cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div\r\n                                                                    [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <span class=\"remarksTxt\"\r\n                                                                    *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                    Answer :{{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                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\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n                                                            <span class=\"mt-2\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                            <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                                Remarks : {{question.remarks}}</div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo cursor-pointer\"\r\n                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                                <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                <div class=\"collage-grid\"\r\n                                                                    [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngIf=\"isValidImage(item)\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"Reference image\">\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                        <div class=\"Partially my-3 px-5\"\r\n                                                            *ngFor=\"let item of question.userAnswer\">\r\n                                                            <span class=\"mt-3\"\r\n                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n                                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                                    <img class=\"img-logo cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                                <div class=\"col-md-6\"\r\n                                                                    *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        Reference Image\r\n                                                                    </div>\r\n\r\n                                                                    <div class=\"collage-grid\"\r\n                                                                        *ngIf=\"hasReferenceImages(question)\">\r\n                                                                        <ng-container\r\n                                                                            *ngFor=\"let answer of question.answers\">\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"answer.referenceImage?.length\">\r\n                                                                                <div class=\"collage-tile\"\r\n                                                                                    *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                                    <img class=\"cursor-pointer\"\r\n                                                                                        (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                        [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                        alt=\"\" />\r\n                                                                                </div>\r\n                                                                            </ng-container>\r\n                                                                        </ng-container>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                    *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n                                                                    <div class=\"title-ref my-3\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                        Validation Answer</div>\r\n                                                                    <img class=\"img-logo  cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                        *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                        src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                        alt=\"\">\r\n                                                                    <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                        *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                        <video controls class=\"w-100 h-100\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                        </video>\r\n\r\n                                                                        <span\r\n                                                                            class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                            <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                title=\"Download Video\"\r\n                                                                                id=\"download-icon\" width=\"44\"\r\n                                                                                height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                fill=\"none\"\r\n                                                                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                class=\"icon-overlay\">\r\n                                                                                <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                    <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                        height=\"40\" rx=\"8\" fill=\"white\">\r\n                                                                                    </rect>\r\n                                                                                    <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n                                                                                        height=\"39\" rx=\"7.5\"\r\n                                                                                        stroke=\"#D0D5DD\"></rect>\r\n                                                                                    <path\r\n                                                                                        d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"1.67\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\"></path>\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_3822_19479\"\r\n                                                                                        x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                        height=\"44\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\">\r\n                                                                                        </feFlood>\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feOffset dy=\"1\"></feOffset>\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"1\">\r\n                                                                                        </feGaussianBlur>\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                        </feColorMatrix>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                        </feBlend>\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                            result=\"shape\"></feBlend>\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n                                                                    <span\r\n                                                                        *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                        [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                        Answer : {{item.validationAnswer}}</span>\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img class=\"img-logo  cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n\r\n\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n                                                                                [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\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                                                        <!-- Task: Multiple reference images (Array) -->\r\n                                                        <div class=\"col-md-6\"\r\n                                                            *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n                                                            <!-- Question Reference Images -->\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image\r\n                                                            </div>\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"isValidImage(item)\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                            alt=\"Reference image\">\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n\r\n                                                        <!-- Checklist: Single reference image (String) -->\r\n                                                        <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n                                                                    && question.questionReferenceImage \r\n                                                                    && question.questionReferenceImage !== ''\">\r\n\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n                                                                <div class=\"collage-tile\">\r\n                                                                    <img class=\"cursor-pointer\"\r\n                                                                        (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n                                                                        [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n                                                                        alt=\"\">\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n                                                            <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                                            <div class=\"position-relative w-100 h-450px p-3\">\r\n                                                                <video controls class=\"w-100 h-100\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                                </video>\r\n\r\n\r\n                                                                <span\r\n                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                    <svg (click)=\"downloadVideo(item.answer)\"\r\n                                                                        title=\"Download Video\" id=\"download-icon\"\r\n                                                                        width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        class=\"icon-overlay\">\r\n                                                                        <g filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                            <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n                                                                                rx=\"8\" fill=\"white\"></rect>\r\n                                                                            <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n                                                                                rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n                                                                            <path\r\n                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                                                stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\"></path>\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n                                                                                y=\"0\" width=\"44\" height=\"44\"\r\n                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                <feFlood flood-opacity=\"0\"\r\n                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                </feFlood>\r\n                                                                                <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                    type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                    result=\"hardAlpha\"></feColorMatrix>\r\n                                                                                <feOffset dy=\"1\"></feOffset>\r\n                                                                                <feGaussianBlur stdDeviation=\"1\">\r\n                                                                                </feGaussianBlur>\r\n                                                                                <feColorMatrix type=\"matrix\"\r\n                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                </feColorMatrix>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                </feBlend>\r\n                                                                                <feBlend mode=\"normal\"\r\n                                                                                    in=\"SourceGraphic\"\r\n                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                    result=\"shape\"></feBlend>\r\n                                                                            </filter>\r\n                                                                        </defs>\r\n                                                                    </svg>\r\n                                                                </span>\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n                                                            Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n\r\n\r\n\r\n\r\n                                                    <div class=\"row px-5\"\r\n                                                        *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6 dfdsfsd\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasReferenceImages(question)\">\r\n                                                                <ng-container *ngFor=\"let answer of question.answers\">\r\n                                                                    <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n                                                                        <div class=\"collage-tile\"\r\n                                                                            *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n                                                                            <img class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n                                                                                [src]=\"environment.TraxAnswerCDN + item\"\r\n                                                                                alt=\"\" />\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- For Checklist Type -->\r\n                                                        <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n                                                            class=\"col-md-6\">\r\n                                                            <div class=\"title-ref my-3\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                Reference Image\r\n                                                            </div>\r\n\r\n                                                            <div class=\"collage-grid\"\r\n                                                                *ngIf=\"hasChecklistReferenceImages(question)\">\r\n                                                                <ng-container\r\n                                                                    *ngFor=\"let answer of question.answers;let i=index;\">\r\n                                                                    <div class=\"collage-tile\"\r\n                                                                        *ngIf=\"answer.referenceImage\">\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n                                                                            [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n                                                                            alt=\"\" />\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <div\r\n                                                            [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n        'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n                                                                    <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n                                                                        class=\"collage-tile\">\r\n\r\n                                                                        <img class=\"cursor-pointer\"\r\n                                                                            (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n                                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                            alt=\"\">\r\n                                                                        <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n                                                                            *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n                                                                            <div class=\"title-ref my-3 \"\r\n                                                                                *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n                                                                                Validation Answer</div>\r\n                                                                            <img *ngIf=\"item.validationType==='Capture Image'\"\r\n                                                                                class=\"cursor-pointer\"\r\n                                                                                (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n                                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                                alt=\"\">\r\n                                                                            <div class=\"position-relative w-100 h-450px p-3\"\r\n                                                                                *ngIf=\"item.validationType === 'Capture Video'\">\r\n                                                                                <video controls class=\"w-100 h-100\"\r\n                                                                                    [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n                                                                                </video>\r\n\r\n                                                                                <span\r\n                                                                                    class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n                                                                                    <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n                                                                                        title=\"Download Video\"\r\n                                                                                        id=\"download-icon\" width=\"44\"\r\n                                                                                        height=\"44\" viewBox=\"0 0 44 44\"\r\n                                                                                        fill=\"none\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        class=\"icon-overlay\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_3822_19479)\">\r\n                                                                                            <rect x=\"2\" y=\"1\" width=\"40\"\r\n                                                                                                height=\"40\" rx=\"8\"\r\n                                                                                                fill=\"white\"></rect>\r\n                                                                                            <rect x=\"2.5\" y=\"1.5\"\r\n                                                                                                width=\"39\" height=\"39\"\r\n                                                                                                rx=\"7.5\"\r\n                                                                                                stroke=\"#D0D5DD\"></rect>\r\n                                                                                            <path\r\n                                                                                                d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"1.67\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\">\r\n                                                                                            </path>\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_3822_19479\"\r\n                                                                                                x=\"0\" y=\"0\" width=\"44\"\r\n                                                                                                height=\"44\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\">\r\n                                                                                                </feFlood>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feOffset dy=\"1\">\r\n                                                                                                </feOffset>\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"1\">\r\n                                                                                                </feGaussianBlur>\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n                                                                                                </feColorMatrix>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_3822_19479\">\r\n                                                                                                </feBlend>\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_3822_19479\"\r\n                                                                                                    result=\"shape\">\r\n                                                                                                </feBlend>\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <span\r\n                                                                                *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n                                                                                Answer :\r\n                                                                                {{item.validationAnswer}}</span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n                                                            {{question.remarks}}</div>\r\n\r\n                                                    </div>\r\n\r\n                                                </ul>\r\n\r\n\r\n                                                <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n                                                    role=\"dialog\" style=\"overflow:hidden\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n                                                                <!-- Prev Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n                                                                    (click)=\"navigateImage('prev')\"\r\n                                                                    [disabled]=\"currentImageIndex === 0\">\r\n                                                                    \u2039\r\n                                                                </button>\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n                                                                <!-- Next Button -->\r\n                                                                <button *ngIf=\"imageList.length > 1\"\r\n                                                                    class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n                                                                    (click)=\"navigateImage('next')\"\r\n                                                                    [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n                                                                    \u203A\r\n                                                                </button>\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n                                                    <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n                                                        role=\"document\">\r\n                                                        <div class=\"modal-content \">\r\n\r\n\r\n\r\n                                                            <div\r\n                                                                class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n                                                                <!-- Image -->\r\n                                                                <img [src]=\"selectedImageUrl\"\r\n                                                                    style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n                                                                    class=\"img-fluid w-100   mx-1\" />\r\n\r\n\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-md-6 text-start\">\r\n                                                        <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button>                                           -->\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 text-end\">\r\n                                                        <button class=\"btn btn-sm btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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 btn-default border-default me-3\"\r\n                                                            [disabled]=\"question.redo\"\r\n                                                            *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                                    <path\r\n                                                                        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\"\r\n                                                                        stroke=\"#344054\" stroke-width=\"2\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        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\"\r\n                                                            *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n                                                            (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n                                                                height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                <path\r\n                                                                    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\"\r\n                                                                    stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Create Task</span>\r\n                                                        </button>\r\n                                                        <button\r\n                                                            *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n                                                            class=\"btn btn-sm border-val1\"\r\n                                                            (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n                                                                class=\"font-task\">View Task</span></button>\r\n\r\n\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=\"imageChecklist.includes(select)\">\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\r\n                                <div class=\" my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n                                            <h3 class=\"uni-title\">Average Downtime</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n                                            <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 qa-bodrer\">\r\n                                        <!-- <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li> -->\r\n\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\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\"> {{this.checklistName}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_count}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.car_license_id}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n                                                                Time:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_person_count\">Number of\r\n                                                                People Interacted :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_person_count}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n                                                                Plate :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.car_reg_number}}</span></span>\r\n                                                        </div>\r\n\r\n                                                    </div>\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-md-6\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection?.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6 text-end\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n                                                                spent:<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.interacted_duration_in_secs}}\r\n                                                                    Mins</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"card-toolbar\"\r\n                                                    *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n                                                    <div class=\"row\">\r\n\r\n                                                        <div class=\"col-md-8\">\r\n                                                            <span class=\"ms-3\"\r\n                                                                *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n                                                                    class=\"badge badge-light-primary\">\r\n                                                                    {{detection.date_timestamp}}</span></span>\r\n                                                        </div>\r\n                                                        <div class=\"col-md-4 text-end\">\r\n                                                            <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n                                                                :<span class=\"badge badge-light-primary\">\r\n                                                                    {{detection.slot_id}}</span></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div class=\"mt-2\">\r\n                                                    <img class=\"w-100 h-500px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n                                                        alt=\"\">\r\n                                                    <div class=\"text-center mt-3\"> {{this.checklistName}}</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=\"videoChecklist.includes(select)\">\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                                <div class=\"my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                    <div class=\"row px-10 mt-5\">\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\">: {{this.checklistName}} </p>\r\n                                        </div>\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\">: {{item.storeName}}</p>\r\n                                        </div>\r\n                                    </div>\r\n                                    <ul class=\"row w-100 margin-top-side\">\r\n                                        <li class=\"qa-heading\">\r\n\r\n                                        </li>\r\n                                        <div class=\"row\">\r\n                                            <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n                                                <div class=\"row px-10 mt-5 margin-left-side\"\r\n                                                    *ngIf=\"select!=='suspiciousactivity'\">\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <h3 class=\"uni-title\">Detection Status</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n                                                        <p class=\"uni-subtitle\">:<span\r\n                                                                class=\"ms-3 badge badge-light-danger\"\r\n                                                                *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <h3 class=\"uni-title\">Date</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n                                                        </p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <h3 class=\"uni-title\">Configured Time</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <h3 class=\"uni-title\">Duration</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <h3 class=\"uni-title\">Downtime</h3>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n                                                        <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n                                                                ngbTooltip=\"Downtime may result in inaccurate data\"\r\n                                                                placement=\"top\" container=\"body\"><svg\r\n                                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n                                                                    height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n                                                                    <path\r\n                                                                        d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n                                                                        stroke=\"#667085\" stroke-width=\"1.33333\"\r\n                                                                        stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg></span></p>\r\n                                                    </div>\r\n                                                </div>\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\"\r\n                                                            *ngIf=\"detection?.customer_id\">Cust ID :\r\n                                                            {{detection.customer_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.queue_id\">Queue ID :\r\n                                                            {{detection.queue_id}}</span>\r\n                                                        <span class=\"ms-2 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.optum_id\">Optom ID :\r\n                                                            {{detection.optum_id}}</span>\r\n                                                        <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n                                                        <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.temp_id\">TempId :\r\n                                                            {{detection.temp_id}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\"\r\n                                                            *ngIf=\"detection?.time_spend\">Timespend :\r\n                                                            {{detection.time_spend}}Mins</span>\r\n\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\"\r\n                                                                *ngIf=\"detection?.entry_time\">Entry time :\r\n                                                                {{detection.entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.exit_time\">Exit time :\r\n                                                                {{detection.exit_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-success\"\r\n                                                                *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n                                                                {{detection.adherence_rate}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n                                                                *ngIf=\"detection?.category\">\r\n                                                                {{detection.category}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n                                                                {{detection.customer_entry_time}}</span>\r\n                                                            <span class=\"ms-3 badge badge-light-default\"\r\n                                                                *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n                                                                {{detection.customer_exit_time}}</span>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n\r\n                                                <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n                                                        alt=\"\">\r\n                                                    </video>\r\n                                                </div>\r\n                                                <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n                                                    <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                        src=\"{{environment.EyeTestCDN}}{{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=\"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\">\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\">: {{this.checklistName}} </p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n                                    <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n                                        <div class=\"row px-10 mt-5 margin-left-side \">\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n                                                <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Detection Status</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n                                                        *ngIf=\"item?.Flag\">Breached</span>\r\n                                                    <span class=\"ms-3 badge badge-light-success\"\r\n                                                        *ngIf=\"!item?.Flag\">Not-breached</span>\r\n                                                </p>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <h3 class=\"uni-title\">Date</h3>\r\n                                            </div>\r\n                                            <div class=\"col-md-3\">\r\n                                                <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"snapcard\">\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\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n                                                            alt=\"open close snap\">\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}} -\r\n                                                                        {{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\"\r\n                                                        *ngIf=\"!item.closeTime\">\r\n                                                        <div\r\n                                                            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\"\r\n                                                                    fill=\"none\" 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\"\r\n                                                                            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\"\r\n                                                                            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|date:'dd-MM-yyyy'}}/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 mt-2\">\r\n                                                                <div>\r\n                                                                    <div class=\"snaptext\">Closing Snap</div>\r\n                                                                    <div class=\"snaptime\">{{item.closeTime}} -\r\n                                                                        {{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                                        </div>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n                                </div>\r\n\r\n                            </div>\r\n                            <div *ngIf=\"boximageChecklist.includes(select)\">\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=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\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\">{{store?.storeName}} |\r\n                                                {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-9\">\r\n                                            <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <h3 class=\"uni-title\">Description:</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-9\"\r\n                                            *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n                                            <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100 \">\r\n                                        <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n                                            <div class=\"card bordercolor bg-secondary mt-8\">\r\n                                                <div class=\"text-start ms-5 mt-2 mb-5\">\r\n                                                    <div *ngIf=\"item.zone\">\r\n                                                        <span\r\n                                                            class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n                                                </div>\r\n                                                <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n                            <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n                                [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n                                [pageSize]=\"limit\" (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\"\r\n                        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</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n    <div class=\"col-md-12  text-end\">\r\n        <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n        </button>\r\n    </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-8\">\r\n        <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n            <div>\r\n                <div class=\"text-start mt-2\">\r\n                    <div *ngIf=\"viewImage.zone\">\r\n                        <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.emptyBoxCount\">\r\n                        <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"viewImage.entry_time\">\r\n                        <span>Entry Time : {{viewImage.entry_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.exit_time\">\r\n                        <span>Exit Time : {{viewImage.exit_time}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.temp_id\">\r\n                        <span>Temp Id : {{viewImage.temp_id}}</span>\r\n                    </div>\r\n                    <div *ngIf=\"viewImage.time_spend\">\r\n                        <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n                    </div>\r\n\r\n                    <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n                        <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n                            {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n                    </div>\r\n                    <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n                </div>\r\n\r\n            </div>\r\n            <div data-bs-dismiss=\"modal\">\r\n                <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X  {{camera.width}}</span> -->\r\n                <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n                        width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n            <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</ng-template>", 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:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}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:14px!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;width:220Px}.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:contain!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}.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}.border-primary1{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:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$2.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i2.NgbModal }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i6.Location }, { type: i2$2.PageInfoService }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -19787,11 +19824,11 @@ class ManageTaskComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageTaskComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.GlobalStateService }, { token: i2$2.PageInfoService }, { token: TraxService }, { token: i1$2.Router }, { token: i2.NgbModal }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageTaskComponent, selector: "lib-manage-task", ngImport: i0, template: "\r\n<div class=\"card\">\r\n    <div class=\"col-md-12 mt-3\">\r\n        <div style=\"padding: 0 1.25rem;\" class=\"card-header border-0 pt-3 mb-5\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"title-text mb-2\">Task Info</span>\r\n                <!-- <span class=\"text-sub mb-2\">Based on 06 Jan, 2022\u2013 13 Jan, 2022</span> -->\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n                        <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\" [routerLink]=\"'/manage/trax/create-task'\" type=\"button\"\r\n                            class=\"btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\" stroke=\"white\"\r\n                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Create Task</span> </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loading' || (taskTableApiState | async) === 'initial'\" 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 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=\"(taskTableApiState | async) === 'loaded' && !taskTableData?.length\" class=\"col-lg-12 pb-5\" >\r\n            <div class=\"card-body text-center\">\r\n                <img src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" class=\"startchecklist\">\r\n                <div class=\"checklist_text fw-semibold mt-6 checkStart\">Start by creating a task</div>\r\n                <div class=\"checklist_span mt-1 checklistHead\">Any task created will live here.</div>\r\n            </div>\r\n            <div data-kt-subscription-table-toolbar=\"base\" class=\"d-flex justify-content-center\">\r\n                <a href=\"https://tangoeye.ai/\" target=\"_blank\" class=\"btn-outline btn-outline btn btn-light upload mx-3 px-16 checkStart\"><span\r\n                        class=\"uploadtext\">How To\r\n                        Create?</span></a>\r\n\r\n                <a  [routerLink]=\"'/manage/trax/create-task'\" type=\"button\" tabindex=\"0\"\r\n                    class=\"btn btn-primary px-16 mx-2 ng-star-inserted checkStart\" style=\"white-space: nowrap;\" *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\"><span\r\n                        class=\"svg-icon svg-icon-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                            viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span><span class=\"create\">Create New</span></a>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loaded' && taskTableData?.length\" calss=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Task <svg\r\n                                        [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('createdByName')\">Created By <svg\r\n                                        [ngClass]=\"sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'createdByName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('priorityType')\">Priority <svg\r\n                                        [ngClass]=\"sortColumName === 'priorityType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'priorityType' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To <svg\r\n                                        [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('scheduleEndTimeISO')\">Due On <svg\r\n                                        [ngClass]=\"sortColumName === 'scheduleEndTimeISO' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'scheduleEndTimeISO' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Status <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\">Actions</span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Publish <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let data of taskTableData;let i=index\">\r\n                            <!-- (click)=\"storeView(obj)\" -->\r\n                            <td class=\"text-capitalize\">\r\n                                <div class=\"symbol symbol-35px symbol-circle\">\r\n                                    <span\r\n                                        class=\"symbol-label bg-light-primary text-primary me-2\">{{data.checkListChar.toUpperCase()}}</span>\r\n                                </div>\r\n                                <span class=\"text-decoration-underline text-primary\"\r\n                                    ><a\r\n                                        [routerLink]=\"['/manage/trax/dashboard/taskinfo']\"\r\n                                        [queryParams]=\"{taskId: data._id }\"\r\n                                        class=\"cursor-pointer\"> {{data.checkListName}}</a></span>\r\n\r\n                            </td>\r\n                            <td>{{data.createdByName}}</td>\r\n                            <td>{{data.priorityType ? (data.priorityType  | titlecase) : '--'}}</td>\r\n                            <td>{{data.storeCount}}</td>\r\n                            <td>{{data?.scheduleEndTimeISO ? formatDueDate(data?.scheduleEndTimeISO) : '--'}}</td>\r\n                            <td><span class=\"badge\"\r\n                                    [ngClass]=\"data.publish ? 'badge-light-success' : 'badge-light-primary'\">{{(data.publish\r\n                                    ? 'Published' :'draft') | titlecase}}</span></td>\r\n                            <td>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"me-6\"\r\n                                    [ngClass]=\"!data?.publish ? 'cursor-pointer' : ''\"\r\n                                    >\r\n                                    <svg (click)=\"onAction('view', data)\"  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=\"M0.832031 9.99967C0.832031 9.99967 4.16536 3.33301 9.9987 3.33301C15.832 3.33301 19.1654 9.99967 19.1654 9.99967C19.1654 9.99967 15.832 16.6663 9.9987 16.6663C4.16536 16.6663 0.832031 9.99967 0.832031 9.99967Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('edit', data)\" class=\"me-6\"\r\n                                    [ngClass]=\"true ? 'cursor-pointer' : ''\"\r\n                                    >\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                                        <g clip-path=\"url(#clip0_2254_20261)\">\r\n                                            <path\r\n                                                d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M16.1654 12.4997C16.0544 12.751 16.0213 13.0298 16.0704 13.3002C16.1194 13.5705 16.2482 13.8199 16.4404 14.0163L16.4904 14.0663C16.6453 14.2211 16.7683 14.4049 16.8521 14.6073C16.936 14.8096 16.9792 15.0265 16.9792 15.2455C16.9792 15.4645 16.936 15.6814 16.8521 15.8837C16.7683 16.0861 16.6453 16.2699 16.4904 16.4247C16.3356 16.5796 16.1518 16.7026 15.9494 16.7864C15.7471 16.8703 15.5302 16.9135 15.3112 16.9135C15.0922 16.9135 14.8753 16.8703 14.673 16.7864C14.4706 16.7026 14.2868 16.5796 14.132 16.4247L14.082 16.3747C13.8856 16.1826 13.6362 16.0537 13.3659 16.0047C13.0955 15.9557 12.8167 15.9887 12.5654 16.0997C12.3189 16.2053 12.1087 16.3807 11.9606 16.6043C11.8126 16.8279 11.7331 17.0899 11.732 17.358V17.4997C11.732 17.9417 11.5564 18.3656 11.2439 18.6782C10.9313 18.9907 10.5074 19.1663 10.0654 19.1663C9.62334 19.1663 9.19941 18.9907 8.88685 18.6782C8.57429 18.3656 8.3987 17.9417 8.3987 17.4997V17.4247C8.39225 17.1488 8.30296 16.8813 8.14246 16.6569C7.98195 16.4325 7.75764 16.2616 7.4987 16.1663C7.24735 16.0554 6.96854 16.0223 6.69821 16.0713C6.42788 16.1204 6.17843 16.2492 5.98203 16.4413L5.93203 16.4913C5.77724 16.6463 5.59343 16.7692 5.3911 16.8531C5.18877 16.937 4.97189 16.9802 4.75286 16.9802C4.53384 16.9802 4.31696 16.937 4.11463 16.8531C3.9123 16.7692 3.72849 16.6463 3.5737 16.4913C3.41874 16.3366 3.29581 16.1527 3.21193 15.9504C3.12806 15.7481 3.08489 15.5312 3.08489 15.3122C3.08489 15.0931 3.12806 14.8763 3.21193 14.6739C3.29581 14.4716 3.41874 14.2878 3.5737 14.133L3.6237 14.083C3.81581 13.8866 3.94469 13.6372 3.9937 13.3668C4.04272 13.0965 4.00963 12.8177 3.8987 12.5663C3.79306 12.3199 3.61766 12.1097 3.39409 11.9616C3.17051 11.8135 2.90852 11.7341 2.64036 11.733H2.4987C2.05667 11.733 1.63275 11.5574 1.32019 11.2449C1.00763 10.9323 0.832031 10.5084 0.832031 10.0663C0.832031 9.62431 1.00763 9.20039 1.32019 8.88783C1.63275 8.57527 2.05667 8.39967 2.4987 8.39967H2.5737C2.84953 8.39322 3.11703 8.30394 3.34145 8.14343C3.56586 7.98293 3.73679 7.75862 3.83203 7.49967C3.94296 7.24833 3.97605 6.96951 3.92703 6.69918C3.87802 6.42885 3.74914 6.17941 3.55703 5.98301L3.50703 5.93301C3.35207 5.77822 3.22914 5.5944 3.14526 5.39207C3.06139 5.18974 3.01822 4.97287 3.01822 4.75384C3.01822 4.53481 3.06139 4.31794 3.14526 4.11561C3.22914 3.91328 3.35207 3.72946 3.50703 3.57467C3.66182 3.41971 3.84563 3.29678 4.04796 3.21291C4.25029 3.12903 4.46717 3.08586 4.6862 3.08586C4.90522 3.08586 5.1221 3.12903 5.32443 3.21291C5.52676 3.29678 5.71058 3.41971 5.86536 3.57467L5.91536 3.62467C6.11176 3.81679 6.36121 3.94566 6.63154 3.99468C6.90187 4.04369 7.18068 4.0106 7.43203 3.89967H7.4987C7.74517 3.79404 7.95538 3.61864 8.10344 3.39506C8.2515 3.17149 8.33096 2.9095 8.33203 2.64134V2.49967C8.33203 2.05765 8.50763 1.63372 8.82019 1.32116C9.13275 1.0086 9.55667 0.833008 9.9987 0.833008C10.4407 0.833008 10.8646 1.0086 11.1772 1.32116C11.4898 1.63372 11.6654 2.05765 11.6654 2.49967V2.57467C11.6664 2.84283 11.7459 3.10482 11.894 3.3284C12.042 3.55197 12.2522 3.72737 12.4987 3.83301C12.75 3.94394 13.0289 3.97703 13.2992 3.92801C13.5695 3.879 13.819 3.75012 14.0154 3.55801L14.0654 3.50801C14.2202 3.35305 14.404 3.23012 14.6063 3.14624C14.8086 3.06237 15.0255 3.0192 15.2445 3.0192C15.4636 3.0192 15.6804 3.06237 15.8828 3.14624C16.0851 3.23012 16.2689 3.35305 16.4237 3.50801C16.5787 3.6628 16.7016 3.84661 16.7855 4.04894C16.8693 4.25127 16.9125 4.46815 16.9125 4.68717C16.9125 4.9062 16.8693 5.12308 16.7855 5.32541C16.7016 5.52774 16.5787 5.71155 16.4237 5.86634L16.3737 5.91634C16.1816 6.11274 16.0527 6.36219 16.0037 6.63252C15.9547 6.90285 15.9878 7.18166 16.0987 7.43301V7.49967C16.2043 7.74615 16.3797 7.95635 16.6033 8.10442C16.8269 8.25248 17.0889 8.33194 17.357 8.33301H17.4987C17.9407 8.33301 18.3646 8.5086 18.6772 8.82116C18.9898 9.13372 19.1654 9.55765 19.1654 9.99967C19.1654 10.4417 18.9898 10.8656 18.6772 11.1782C18.3646 11.4907 17.9407 11.6663 17.4987 11.6663H17.4237C17.1555 11.6674 16.8936 11.7469 16.67 11.8949C16.4464 12.043 16.271 12.2532 16.1654 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20261\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"me-2\" (click)=\"onAction('duplicate', data)\" [ngClass]=\"true ? 'cursor-pointer' : ''\" >\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_2254_20265)\">\r\n                                            <path\r\n                                                d=\"M4.16797 12.5003H3.33464C2.89261 12.5003 2.46868 12.3247 2.15612 12.0122C1.84356 11.6996 1.66797 11.2757 1.66797 10.8337V3.33366C1.66797 2.89163 1.84356 2.46771 2.15612 2.15515C2.46868 1.84259 2.89261 1.66699 3.33464 1.66699H10.8346C11.2767 1.66699 11.7006 1.84259 12.0131 2.15515C12.3257 2.46771 12.5013 2.89163 12.5013 3.33366V4.16699M9.16797 7.50033H16.668C17.5884 7.50033 18.3346 8.24652 18.3346 9.16699V16.667C18.3346 17.5875 17.5884 18.3337 16.668 18.3337H9.16797C8.24749 18.3337 7.5013 17.5875 7.5013 16.667V9.16699C7.5013 8.24652 8.24749 7.50033 9.16797 7.50033Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20265\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('delete', data)\" [ngClass]=\"!data?.publish  ? 'cursor-pointer' : ''\">\r\n                                    <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_3162_10414)\">\r\n                                            <path\r\n                                                d=\"M12.5 15.0228H14.1667M14.1667 15.0228H27.5M14.1667 15.0228V26.6895C14.1667 27.1315 14.3423 27.5554 14.6548 27.868C14.9674 28.1805 15.3913 28.3561 15.8333 28.3561H24.1667C24.6087 28.3561 25.0326 28.1805 25.3452 27.868C25.6577 27.5554 25.8333 27.1315 25.8333 26.6895V15.0228H14.1667ZM16.6667 15.0228V13.3561C16.6667 12.9141 16.8423 12.4902 17.1548 12.1776C17.4674 11.865 17.8913 11.6895 18.3333 11.6895H21.6667C22.1087 11.6895 22.5326 11.865 22.8452 12.1776C23.1577 12.4902 23.3333 12.9141 23.3333 13.3561V15.0228M18.3333 19.1895V24.1895M21.6667 19.1895V24.1895\"\r\n                                                [attr.stroke]=\"!data?.publish ? '#667085' :'#D0D5DD'\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_3162_10414\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10.0234)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                            <td *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" >\r\n                                <span class=\"form-check form-switch\">\r\n                                    <input [checked]=\"data.publish\" (change)=\"publish($event, data,i)\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n                                        class=\"form-check-input mt-3 cursor-pointer\">\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n            <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".rotate{rotate:180deg;transition:1s}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageTaskComponent, selector: "lib-manage-task", ngImport: i0, template: "\r\n<div class=\"card\">\r\n    <div class=\"col-md-12 mt-3\">\r\n        <div style=\"padding: 0 1.25rem;\" class=\"card-header border-0 pt-3 mb-5\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"title-text mb-2\">Task Info</span>\r\n                <!-- <span class=\"text-sub mb-2\">Based on 06 Jan, 2022\u2013 13 Jan, 2022</span> -->\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n                        <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\" [routerLink]=\"'/manage/trax/create-task'\" type=\"button\"\r\n                            class=\"btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\" stroke=\"white\"\r\n                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Create Task</span> </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loading' || (taskTableApiState | async) === 'initial'\" 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 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=\"(taskTableApiState | async) === 'loaded' && !taskTableData?.length\" class=\"col-lg-12 pb-5\" >\r\n            <div class=\"card-body text-center\">\r\n                <img src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" class=\"startchecklist\">\r\n                <div class=\"checklist_text fw-semibold mt-6 checkStart\">Start by creating a task</div>\r\n                <div class=\"checklist_span mt-1 checklistHead\">Any task created will live here.</div>\r\n            </div>\r\n            <div data-kt-subscription-table-toolbar=\"base\" class=\"d-flex justify-content-center\">\r\n                <a href=\"https://tangoeye.ai/\" target=\"_blank\" class=\"btn-outline btn-outline btn btn-light upload mx-3 px-16 checkStart\"><span\r\n                        class=\"uploadtext\">How To\r\n                        Create?</span></a>\r\n\r\n                <a  [routerLink]=\"'/manage/trax/create-task'\" type=\"button\" tabindex=\"0\"\r\n                    class=\"btn btn-primary px-16 mx-2 ng-star-inserted checkStart\" style=\"white-space: nowrap;\" *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\"><span\r\n                        class=\"svg-icon svg-icon-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                            viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span><span class=\"create\">Create New</span></a>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loaded' && taskTableData?.length\" calss=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Task <svg\r\n                                        [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('createdByName')\">Created By <svg\r\n                                        [ngClass]=\"sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'createdByName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('priorityType')\">Priority <svg\r\n                                        [ngClass]=\"sortColumName === 'priorityType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'priorityType' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To <svg\r\n                                        [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('scheduleEndTimeISO')\">Due On <svg\r\n                                        [ngClass]=\"sortColumName === 'scheduleEndTimeISO' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'scheduleEndTimeISO' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Status <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\">Actions</span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Publish <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let data of taskTableData;let i=index\">\r\n                            <!-- (click)=\"storeView(obj)\" -->\r\n                            <td class=\"text-capitalize\">\r\n                                <div class=\"symbol symbol-35px symbol-circle\">\r\n                                    <span\r\n                                        class=\"symbol-label bg-light-primary text-primary me-2\">{{data.checkListChar.toUpperCase()}}</span>\r\n                                </div>\r\n                                <span class=\"text-decoration-underline text-primary\"\r\n                                    ><a\r\n                                        [routerLink]=\"['/manage/trax/dashboard/taskinfo']\"\r\n                                        [queryParams]=\"{taskId: data._id }\"\r\n                                        class=\"cursor-pointer\"> {{data.checkListName}}</a></span>\r\n\r\n                            </td>\r\n                            <td>{{data.createdByName}}</td>\r\n                            <td>{{data.priorityType ? (data.priorityType  | titlecase) : '--'}}</td>\r\n                            <td>{{data.storeCount}}</td>\r\n                            <td>{{data?.scheduleEndTimeISO ? formatDueDate(data?.scheduleEndTimeISO) : '--'}}</td>\r\n                            <td><span class=\"badge\"\r\n                                    [ngClass]=\"data.publish ? 'badge-light-success' : 'badge-light-primary'\">{{(data.publish\r\n                                    ? 'Published' :'draft') | titlecase}}</span></td>\r\n                            <td>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" class=\"me-6\"\r\n                                    [ngClass]=\"!data?.publish ? 'cursor-pointer' : ''\"\r\n                                    >\r\n                                    <svg (click)=\"onAction('view', data)\"  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=\"M0.832031 9.99967C0.832031 9.99967 4.16536 3.33301 9.9987 3.33301C15.832 3.33301 19.1654 9.99967 19.1654 9.99967C19.1654 9.99967 15.832 16.6663 9.9987 16.6663C4.16536 16.6663 0.832031 9.99967 0.832031 9.99967Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" (click)=\"onAction('edit', data)\" class=\"me-6\"\r\n                                    [ngClass]=\"true ? 'cursor-pointer' : ''\"\r\n                                    >\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                                        <g clip-path=\"url(#clip0_2254_20261)\">\r\n                                            <path\r\n                                                d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M16.1654 12.4997C16.0544 12.751 16.0213 13.0298 16.0704 13.3002C16.1194 13.5705 16.2482 13.8199 16.4404 14.0163L16.4904 14.0663C16.6453 14.2211 16.7683 14.4049 16.8521 14.6073C16.936 14.8096 16.9792 15.0265 16.9792 15.2455C16.9792 15.4645 16.936 15.6814 16.8521 15.8837C16.7683 16.0861 16.6453 16.2699 16.4904 16.4247C16.3356 16.5796 16.1518 16.7026 15.9494 16.7864C15.7471 16.8703 15.5302 16.9135 15.3112 16.9135C15.0922 16.9135 14.8753 16.8703 14.673 16.7864C14.4706 16.7026 14.2868 16.5796 14.132 16.4247L14.082 16.3747C13.8856 16.1826 13.6362 16.0537 13.3659 16.0047C13.0955 15.9557 12.8167 15.9887 12.5654 16.0997C12.3189 16.2053 12.1087 16.3807 11.9606 16.6043C11.8126 16.8279 11.7331 17.0899 11.732 17.358V17.4997C11.732 17.9417 11.5564 18.3656 11.2439 18.6782C10.9313 18.9907 10.5074 19.1663 10.0654 19.1663C9.62334 19.1663 9.19941 18.9907 8.88685 18.6782C8.57429 18.3656 8.3987 17.9417 8.3987 17.4997V17.4247C8.39225 17.1488 8.30296 16.8813 8.14246 16.6569C7.98195 16.4325 7.75764 16.2616 7.4987 16.1663C7.24735 16.0554 6.96854 16.0223 6.69821 16.0713C6.42788 16.1204 6.17843 16.2492 5.98203 16.4413L5.93203 16.4913C5.77724 16.6463 5.59343 16.7692 5.3911 16.8531C5.18877 16.937 4.97189 16.9802 4.75286 16.9802C4.53384 16.9802 4.31696 16.937 4.11463 16.8531C3.9123 16.7692 3.72849 16.6463 3.5737 16.4913C3.41874 16.3366 3.29581 16.1527 3.21193 15.9504C3.12806 15.7481 3.08489 15.5312 3.08489 15.3122C3.08489 15.0931 3.12806 14.8763 3.21193 14.6739C3.29581 14.4716 3.41874 14.2878 3.5737 14.133L3.6237 14.083C3.81581 13.8866 3.94469 13.6372 3.9937 13.3668C4.04272 13.0965 4.00963 12.8177 3.8987 12.5663C3.79306 12.3199 3.61766 12.1097 3.39409 11.9616C3.17051 11.8135 2.90852 11.7341 2.64036 11.733H2.4987C2.05667 11.733 1.63275 11.5574 1.32019 11.2449C1.00763 10.9323 0.832031 10.5084 0.832031 10.0663C0.832031 9.62431 1.00763 9.20039 1.32019 8.88783C1.63275 8.57527 2.05667 8.39967 2.4987 8.39967H2.5737C2.84953 8.39322 3.11703 8.30394 3.34145 8.14343C3.56586 7.98293 3.73679 7.75862 3.83203 7.49967C3.94296 7.24833 3.97605 6.96951 3.92703 6.69918C3.87802 6.42885 3.74914 6.17941 3.55703 5.98301L3.50703 5.93301C3.35207 5.77822 3.22914 5.5944 3.14526 5.39207C3.06139 5.18974 3.01822 4.97287 3.01822 4.75384C3.01822 4.53481 3.06139 4.31794 3.14526 4.11561C3.22914 3.91328 3.35207 3.72946 3.50703 3.57467C3.66182 3.41971 3.84563 3.29678 4.04796 3.21291C4.25029 3.12903 4.46717 3.08586 4.6862 3.08586C4.90522 3.08586 5.1221 3.12903 5.32443 3.21291C5.52676 3.29678 5.71058 3.41971 5.86536 3.57467L5.91536 3.62467C6.11176 3.81679 6.36121 3.94566 6.63154 3.99468C6.90187 4.04369 7.18068 4.0106 7.43203 3.89967H7.4987C7.74517 3.79404 7.95538 3.61864 8.10344 3.39506C8.2515 3.17149 8.33096 2.9095 8.33203 2.64134V2.49967C8.33203 2.05765 8.50763 1.63372 8.82019 1.32116C9.13275 1.0086 9.55667 0.833008 9.9987 0.833008C10.4407 0.833008 10.8646 1.0086 11.1772 1.32116C11.4898 1.63372 11.6654 2.05765 11.6654 2.49967V2.57467C11.6664 2.84283 11.7459 3.10482 11.894 3.3284C12.042 3.55197 12.2522 3.72737 12.4987 3.83301C12.75 3.94394 13.0289 3.97703 13.2992 3.92801C13.5695 3.879 13.819 3.75012 14.0154 3.55801L14.0654 3.50801C14.2202 3.35305 14.404 3.23012 14.6063 3.14624C14.8086 3.06237 15.0255 3.0192 15.2445 3.0192C15.4636 3.0192 15.6804 3.06237 15.8828 3.14624C16.0851 3.23012 16.2689 3.35305 16.4237 3.50801C16.5787 3.6628 16.7016 3.84661 16.7855 4.04894C16.8693 4.25127 16.9125 4.46815 16.9125 4.68717C16.9125 4.9062 16.8693 5.12308 16.7855 5.32541C16.7016 5.52774 16.5787 5.71155 16.4237 5.86634L16.3737 5.91634C16.1816 6.11274 16.0527 6.36219 16.0037 6.63252C15.9547 6.90285 15.9878 7.18166 16.0987 7.43301V7.49967C16.2043 7.74615 16.3797 7.95635 16.6033 8.10442C16.8269 8.25248 17.0889 8.33194 17.357 8.33301H17.4987C17.9407 8.33301 18.3646 8.5086 18.6772 8.82116C18.9898 9.13372 19.1654 9.55765 19.1654 9.99967C19.1654 10.4417 18.9898 10.8656 18.6772 11.1782C18.3646 11.4907 17.9407 11.6663 17.4987 11.6663H17.4237C17.1555 11.6674 16.8936 11.7469 16.67 11.8949C16.4464 12.043 16.271 12.2532 16.1654 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20261\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" class=\"me-2\" (click)=\"onAction('duplicate', data)\" [ngClass]=\"true ? 'cursor-pointer' : ''\" >\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_2254_20265)\">\r\n                                            <path\r\n                                                d=\"M4.16797 12.5003H3.33464C2.89261 12.5003 2.46868 12.3247 2.15612 12.0122C1.84356 11.6996 1.66797 11.2757 1.66797 10.8337V3.33366C1.66797 2.89163 1.84356 2.46771 2.15612 2.15515C2.46868 1.84259 2.89261 1.66699 3.33464 1.66699H10.8346C11.2767 1.66699 11.7006 1.84259 12.0131 2.15515C12.3257 2.46771 12.5013 2.89163 12.5013 3.33366V4.16699M9.16797 7.50033H16.668C17.5884 7.50033 18.3346 8.24652 18.3346 9.16699V16.667C18.3346 17.5875 17.5884 18.3337 16.668 18.3337H9.16797C8.24749 18.3337 7.5013 17.5875 7.5013 16.667V9.16699C7.5013 8.24652 8.24749 7.50033 9.16797 7.50033Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20265\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('delete', data)\" [ngClass]=\"!data?.publish  ? 'cursor-pointer' : ''\">\r\n                                    <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_3162_10414)\">\r\n                                            <path\r\n                                                d=\"M12.5 15.0228H14.1667M14.1667 15.0228H27.5M14.1667 15.0228V26.6895C14.1667 27.1315 14.3423 27.5554 14.6548 27.868C14.9674 28.1805 15.3913 28.3561 15.8333 28.3561H24.1667C24.6087 28.3561 25.0326 28.1805 25.3452 27.868C25.6577 27.5554 25.8333 27.1315 25.8333 26.6895V15.0228H14.1667ZM16.6667 15.0228V13.3561C16.6667 12.9141 16.8423 12.4902 17.1548 12.1776C17.4674 11.865 17.8913 11.6895 18.3333 11.6895H21.6667C22.1087 11.6895 22.5326 11.865 22.8452 12.1776C23.1577 12.4902 23.3333 12.9141 23.3333 13.3561V15.0228M18.3333 19.1895V24.1895M21.6667 19.1895V24.1895\"\r\n                                                [attr.stroke]=\"!data?.publish ? '#667085' :'#D0D5DD'\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_3162_10414\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10.0234)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                            <td *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" >\r\n                                <span class=\"form-check form-switch\">\r\n                                    <input [checked]=\"data.publish\" (change)=\"publish($event, data,i)\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n                                        class=\"form-check-input mt-3 cursor-pointer\">\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n            <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".rotate{rotate:180deg;transition:1s}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-manage-task', template: "\r\n<div class=\"card\">\r\n    <div class=\"col-md-12 mt-3\">\r\n        <div style=\"padding: 0 1.25rem;\" class=\"card-header border-0 pt-3 mb-5\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"title-text mb-2\">Task Info</span>\r\n                <!-- <span class=\"text-sub mb-2\">Based on 06 Jan, 2022\u2013 13 Jan, 2022</span> -->\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n                        <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\" [routerLink]=\"'/manage/trax/create-task'\" type=\"button\"\r\n                            class=\"btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\" stroke=\"white\"\r\n                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Create Task</span> </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loading' || (taskTableApiState | async) === 'initial'\" 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 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=\"(taskTableApiState | async) === 'loaded' && !taskTableData?.length\" class=\"col-lg-12 pb-5\" >\r\n            <div class=\"card-body text-center\">\r\n                <img src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" class=\"startchecklist\">\r\n                <div class=\"checklist_text fw-semibold mt-6 checkStart\">Start by creating a task</div>\r\n                <div class=\"checklist_span mt-1 checklistHead\">Any task created will live here.</div>\r\n            </div>\r\n            <div data-kt-subscription-table-toolbar=\"base\" class=\"d-flex justify-content-center\">\r\n                <a href=\"https://tangoeye.ai/\" target=\"_blank\" class=\"btn-outline btn-outline btn btn-light upload mx-3 px-16 checkStart\"><span\r\n                        class=\"uploadtext\">How To\r\n                        Create?</span></a>\r\n\r\n                <a  [routerLink]=\"'/manage/trax/create-task'\" type=\"button\" tabindex=\"0\"\r\n                    class=\"btn btn-primary px-16 mx-2 ng-star-inserted checkStart\" style=\"white-space: nowrap;\" *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\"><span\r\n                        class=\"svg-icon svg-icon-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                            viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span><span class=\"create\">Create New</span></a>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loaded' && taskTableData?.length\" calss=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Task <svg\r\n                                        [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('createdByName')\">Created By <svg\r\n                                        [ngClass]=\"sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'createdByName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('priorityType')\">Priority <svg\r\n                                        [ngClass]=\"sortColumName === 'priorityType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'priorityType' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To <svg\r\n                                        [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('scheduleEndTimeISO')\">Due On <svg\r\n                                        [ngClass]=\"sortColumName === 'scheduleEndTimeISO' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'scheduleEndTimeISO' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Status <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\">Actions</span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Publish <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let data of taskTableData;let i=index\">\r\n                            <!-- (click)=\"storeView(obj)\" -->\r\n                            <td class=\"text-capitalize\">\r\n                                <div class=\"symbol symbol-35px symbol-circle\">\r\n                                    <span\r\n                                        class=\"symbol-label bg-light-primary text-primary me-2\">{{data.checkListChar.toUpperCase()}}</span>\r\n                                </div>\r\n                                <span class=\"text-decoration-underline text-primary\"\r\n                                    ><a\r\n                                        [routerLink]=\"['/manage/trax/dashboard/taskinfo']\"\r\n                                        [queryParams]=\"{taskId: data._id }\"\r\n                                        class=\"cursor-pointer\"> {{data.checkListName}}</a></span>\r\n\r\n                            </td>\r\n                            <td>{{data.createdByName}}</td>\r\n                            <td>{{data.priorityType ? (data.priorityType  | titlecase) : '--'}}</td>\r\n                            <td>{{data.storeCount}}</td>\r\n                            <td>{{data?.scheduleEndTimeISO ? formatDueDate(data?.scheduleEndTimeISO) : '--'}}</td>\r\n                            <td><span class=\"badge\"\r\n                                    [ngClass]=\"data.publish ? 'badge-light-success' : 'badge-light-primary'\">{{(data.publish\r\n                                    ? 'Published' :'draft') | titlecase}}</span></td>\r\n                            <td>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"me-6\"\r\n                                    [ngClass]=\"!data?.publish ? 'cursor-pointer' : ''\"\r\n                                    >\r\n                                    <svg (click)=\"onAction('view', data)\"  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=\"M0.832031 9.99967C0.832031 9.99967 4.16536 3.33301 9.9987 3.33301C15.832 3.33301 19.1654 9.99967 19.1654 9.99967C19.1654 9.99967 15.832 16.6663 9.9987 16.6663C4.16536 16.6663 0.832031 9.99967 0.832031 9.99967Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('edit', data)\" class=\"me-6\"\r\n                                    [ngClass]=\"true ? 'cursor-pointer' : ''\"\r\n                                    >\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                                        <g clip-path=\"url(#clip0_2254_20261)\">\r\n                                            <path\r\n                                                d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M16.1654 12.4997C16.0544 12.751 16.0213 13.0298 16.0704 13.3002C16.1194 13.5705 16.2482 13.8199 16.4404 14.0163L16.4904 14.0663C16.6453 14.2211 16.7683 14.4049 16.8521 14.6073C16.936 14.8096 16.9792 15.0265 16.9792 15.2455C16.9792 15.4645 16.936 15.6814 16.8521 15.8837C16.7683 16.0861 16.6453 16.2699 16.4904 16.4247C16.3356 16.5796 16.1518 16.7026 15.9494 16.7864C15.7471 16.8703 15.5302 16.9135 15.3112 16.9135C15.0922 16.9135 14.8753 16.8703 14.673 16.7864C14.4706 16.7026 14.2868 16.5796 14.132 16.4247L14.082 16.3747C13.8856 16.1826 13.6362 16.0537 13.3659 16.0047C13.0955 15.9557 12.8167 15.9887 12.5654 16.0997C12.3189 16.2053 12.1087 16.3807 11.9606 16.6043C11.8126 16.8279 11.7331 17.0899 11.732 17.358V17.4997C11.732 17.9417 11.5564 18.3656 11.2439 18.6782C10.9313 18.9907 10.5074 19.1663 10.0654 19.1663C9.62334 19.1663 9.19941 18.9907 8.88685 18.6782C8.57429 18.3656 8.3987 17.9417 8.3987 17.4997V17.4247C8.39225 17.1488 8.30296 16.8813 8.14246 16.6569C7.98195 16.4325 7.75764 16.2616 7.4987 16.1663C7.24735 16.0554 6.96854 16.0223 6.69821 16.0713C6.42788 16.1204 6.17843 16.2492 5.98203 16.4413L5.93203 16.4913C5.77724 16.6463 5.59343 16.7692 5.3911 16.8531C5.18877 16.937 4.97189 16.9802 4.75286 16.9802C4.53384 16.9802 4.31696 16.937 4.11463 16.8531C3.9123 16.7692 3.72849 16.6463 3.5737 16.4913C3.41874 16.3366 3.29581 16.1527 3.21193 15.9504C3.12806 15.7481 3.08489 15.5312 3.08489 15.3122C3.08489 15.0931 3.12806 14.8763 3.21193 14.6739C3.29581 14.4716 3.41874 14.2878 3.5737 14.133L3.6237 14.083C3.81581 13.8866 3.94469 13.6372 3.9937 13.3668C4.04272 13.0965 4.00963 12.8177 3.8987 12.5663C3.79306 12.3199 3.61766 12.1097 3.39409 11.9616C3.17051 11.8135 2.90852 11.7341 2.64036 11.733H2.4987C2.05667 11.733 1.63275 11.5574 1.32019 11.2449C1.00763 10.9323 0.832031 10.5084 0.832031 10.0663C0.832031 9.62431 1.00763 9.20039 1.32019 8.88783C1.63275 8.57527 2.05667 8.39967 2.4987 8.39967H2.5737C2.84953 8.39322 3.11703 8.30394 3.34145 8.14343C3.56586 7.98293 3.73679 7.75862 3.83203 7.49967C3.94296 7.24833 3.97605 6.96951 3.92703 6.69918C3.87802 6.42885 3.74914 6.17941 3.55703 5.98301L3.50703 5.93301C3.35207 5.77822 3.22914 5.5944 3.14526 5.39207C3.06139 5.18974 3.01822 4.97287 3.01822 4.75384C3.01822 4.53481 3.06139 4.31794 3.14526 4.11561C3.22914 3.91328 3.35207 3.72946 3.50703 3.57467C3.66182 3.41971 3.84563 3.29678 4.04796 3.21291C4.25029 3.12903 4.46717 3.08586 4.6862 3.08586C4.90522 3.08586 5.1221 3.12903 5.32443 3.21291C5.52676 3.29678 5.71058 3.41971 5.86536 3.57467L5.91536 3.62467C6.11176 3.81679 6.36121 3.94566 6.63154 3.99468C6.90187 4.04369 7.18068 4.0106 7.43203 3.89967H7.4987C7.74517 3.79404 7.95538 3.61864 8.10344 3.39506C8.2515 3.17149 8.33096 2.9095 8.33203 2.64134V2.49967C8.33203 2.05765 8.50763 1.63372 8.82019 1.32116C9.13275 1.0086 9.55667 0.833008 9.9987 0.833008C10.4407 0.833008 10.8646 1.0086 11.1772 1.32116C11.4898 1.63372 11.6654 2.05765 11.6654 2.49967V2.57467C11.6664 2.84283 11.7459 3.10482 11.894 3.3284C12.042 3.55197 12.2522 3.72737 12.4987 3.83301C12.75 3.94394 13.0289 3.97703 13.2992 3.92801C13.5695 3.879 13.819 3.75012 14.0154 3.55801L14.0654 3.50801C14.2202 3.35305 14.404 3.23012 14.6063 3.14624C14.8086 3.06237 15.0255 3.0192 15.2445 3.0192C15.4636 3.0192 15.6804 3.06237 15.8828 3.14624C16.0851 3.23012 16.2689 3.35305 16.4237 3.50801C16.5787 3.6628 16.7016 3.84661 16.7855 4.04894C16.8693 4.25127 16.9125 4.46815 16.9125 4.68717C16.9125 4.9062 16.8693 5.12308 16.7855 5.32541C16.7016 5.52774 16.5787 5.71155 16.4237 5.86634L16.3737 5.91634C16.1816 6.11274 16.0527 6.36219 16.0037 6.63252C15.9547 6.90285 15.9878 7.18166 16.0987 7.43301V7.49967C16.2043 7.74615 16.3797 7.95635 16.6033 8.10442C16.8269 8.25248 17.0889 8.33194 17.357 8.33301H17.4987C17.9407 8.33301 18.3646 8.5086 18.6772 8.82116C18.9898 9.13372 19.1654 9.55765 19.1654 9.99967C19.1654 10.4417 18.9898 10.8656 18.6772 11.1782C18.3646 11.4907 17.9407 11.6663 17.4987 11.6663H17.4237C17.1555 11.6674 16.8936 11.7469 16.67 11.8949C16.4464 12.043 16.271 12.2532 16.1654 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20261\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"me-2\" (click)=\"onAction('duplicate', data)\" [ngClass]=\"true ? 'cursor-pointer' : ''\" >\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_2254_20265)\">\r\n                                            <path\r\n                                                d=\"M4.16797 12.5003H3.33464C2.89261 12.5003 2.46868 12.3247 2.15612 12.0122C1.84356 11.6996 1.66797 11.2757 1.66797 10.8337V3.33366C1.66797 2.89163 1.84356 2.46771 2.15612 2.15515C2.46868 1.84259 2.89261 1.66699 3.33464 1.66699H10.8346C11.2767 1.66699 11.7006 1.84259 12.0131 2.15515C12.3257 2.46771 12.5013 2.89163 12.5013 3.33366V4.16699M9.16797 7.50033H16.668C17.5884 7.50033 18.3346 8.24652 18.3346 9.16699V16.667C18.3346 17.5875 17.5884 18.3337 16.668 18.3337H9.16797C8.24749 18.3337 7.5013 17.5875 7.5013 16.667V9.16699C7.5013 8.24652 8.24749 7.50033 9.16797 7.50033Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20265\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('delete', data)\" [ngClass]=\"!data?.publish  ? 'cursor-pointer' : ''\">\r\n                                    <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_3162_10414)\">\r\n                                            <path\r\n                                                d=\"M12.5 15.0228H14.1667M14.1667 15.0228H27.5M14.1667 15.0228V26.6895C14.1667 27.1315 14.3423 27.5554 14.6548 27.868C14.9674 28.1805 15.3913 28.3561 15.8333 28.3561H24.1667C24.6087 28.3561 25.0326 28.1805 25.3452 27.868C25.6577 27.5554 25.8333 27.1315 25.8333 26.6895V15.0228H14.1667ZM16.6667 15.0228V13.3561C16.6667 12.9141 16.8423 12.4902 17.1548 12.1776C17.4674 11.865 17.8913 11.6895 18.3333 11.6895H21.6667C22.1087 11.6895 22.5326 11.865 22.8452 12.1776C23.1577 12.4902 23.3333 12.9141 23.3333 13.3561V15.0228M18.3333 19.1895V24.1895M21.6667 19.1895V24.1895\"\r\n                                                [attr.stroke]=\"!data?.publish ? '#667085' :'#D0D5DD'\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_3162_10414\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10.0234)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                            <td *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" >\r\n                                <span class=\"form-check form-switch\">\r\n                                    <input [checked]=\"data.publish\" (change)=\"publish($event, data,i)\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n                                        class=\"form-check-input mt-3 cursor-pointer\">\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n            <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".rotate{rotate:180deg;transition:1s}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"] }]
+            args: [{ selector: 'lib-manage-task', template: "\r\n<div class=\"card\">\r\n    <div class=\"col-md-12 mt-3\">\r\n        <div style=\"padding: 0 1.25rem;\" class=\"card-header border-0 pt-3 mb-5\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"title-text mb-2\">Task Info</span>\r\n                <!-- <span class=\"text-sub mb-2\">Based on 06 Jan, 2022\u2013 13 Jan, 2022</span> -->\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input [formControl]=\"searchInput\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n                        <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\" [routerLink]=\"'/manage/trax/create-task'\" type=\"button\"\r\n                            class=\"btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path d=\"M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346\" stroke=\"white\"\r\n                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Create Task</span> </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loading' || (taskTableApiState | async) === 'initial'\" 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 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=\"(taskTableApiState | async) === 'loaded' && !taskTableData?.length\" class=\"col-lg-12 pb-5\" >\r\n            <div class=\"card-body text-center\">\r\n                <img src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" class=\"startchecklist\">\r\n                <div class=\"checklist_text fw-semibold mt-6 checkStart\">Start by creating a task</div>\r\n                <div class=\"checklist_span mt-1 checklistHead\">Any task created will live here.</div>\r\n            </div>\r\n            <div data-kt-subscription-table-toolbar=\"base\" class=\"d-flex justify-content-center\">\r\n                <a href=\"https://tangoeye.ai/\" target=\"_blank\" class=\"btn-outline btn-outline btn btn-light upload mx-3 px-16 checkStart\"><span\r\n                        class=\"uploadtext\">How To\r\n                        Create?</span></a>\r\n\r\n                <a  [routerLink]=\"'/manage/trax/create-task'\" type=\"button\" tabindex=\"0\"\r\n                    class=\"btn btn-primary px-16 mx-2 ng-star-inserted checkStart\" style=\"white-space: nowrap;\" *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isAdd\"><span\r\n                        class=\"svg-icon svg-icon-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                            viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span><span class=\"create\">Create New</span></a>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"(taskTableApiState | async) === 'loaded' && taskTableData?.length\" calss=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Task <svg\r\n                                        [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('createdByName')\">Created By <svg\r\n                                        [ngClass]=\"sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'createdByName' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('priorityType')\">Priority <svg\r\n                                        [ngClass]=\"sortColumName === 'priorityType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'priorityType' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To <svg\r\n                                        [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('scheduleEndTimeISO')\">Due On <svg\r\n                                        [ngClass]=\"sortColumName === 'scheduleEndTimeISO' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'scheduleEndTimeISO' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Status <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\">Actions</span>\r\n                            </th>\r\n                            <th *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"cursor-pointer\">\r\n                                <span class=\"cursor-pointer\" (click)=\"sortData('publish')\">Publish <svg\r\n                                        [ngClass]=\"sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'publish' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let data of taskTableData;let i=index\">\r\n                            <!-- (click)=\"storeView(obj)\" -->\r\n                            <td class=\"text-capitalize\">\r\n                                <div class=\"symbol symbol-35px symbol-circle\">\r\n                                    <span\r\n                                        class=\"symbol-label bg-light-primary text-primary me-2\">{{data.checkListChar.toUpperCase()}}</span>\r\n                                </div>\r\n                                <span class=\"text-decoration-underline text-primary\"\r\n                                    ><a\r\n                                        [routerLink]=\"['/manage/trax/dashboard/taskinfo']\"\r\n                                        [queryParams]=\"{taskId: data._id }\"\r\n                                        class=\"cursor-pointer\"> {{data.checkListName}}</a></span>\r\n\r\n                            </td>\r\n                            <td>{{data.createdByName}}</td>\r\n                            <td>{{data.priorityType ? (data.priorityType  | titlecase) : '--'}}</td>\r\n                            <td>{{data.storeCount}}</td>\r\n                            <td>{{data?.scheduleEndTimeISO ? formatDueDate(data?.scheduleEndTimeISO) : '--'}}</td>\r\n                            <td><span class=\"badge\"\r\n                                    [ngClass]=\"data.publish ? 'badge-light-success' : 'badge-light-primary'\">{{(data.publish\r\n                                    ? 'Published' :'draft') | titlecase}}</span></td>\r\n                            <td>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" class=\"me-6\"\r\n                                    [ngClass]=\"!data?.publish ? 'cursor-pointer' : ''\"\r\n                                    >\r\n                                    <svg (click)=\"onAction('view', data)\"  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=\"M0.832031 9.99967C0.832031 9.99967 4.16536 3.33301 9.9987 3.33301C15.832 3.33301 19.1654 9.99967 19.1654 9.99967C19.1654 9.99967 15.832 16.6663 9.9987 16.6663C4.16536 16.6663 0.832031 9.99967 0.832031 9.99967Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                            [attr.stroke]=\"!data?.publish ? '#667085' : '#D0D5DD'\"\r\n                                            stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" (click)=\"onAction('edit', data)\" class=\"me-6\"\r\n                                    [ngClass]=\"true ? 'cursor-pointer' : ''\"\r\n                                    >\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                                        <g clip-path=\"url(#clip0_2254_20261)\">\r\n                                            <path\r\n                                                d=\"M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M16.1654 12.4997C16.0544 12.751 16.0213 13.0298 16.0704 13.3002C16.1194 13.5705 16.2482 13.8199 16.4404 14.0163L16.4904 14.0663C16.6453 14.2211 16.7683 14.4049 16.8521 14.6073C16.936 14.8096 16.9792 15.0265 16.9792 15.2455C16.9792 15.4645 16.936 15.6814 16.8521 15.8837C16.7683 16.0861 16.6453 16.2699 16.4904 16.4247C16.3356 16.5796 16.1518 16.7026 15.9494 16.7864C15.7471 16.8703 15.5302 16.9135 15.3112 16.9135C15.0922 16.9135 14.8753 16.8703 14.673 16.7864C14.4706 16.7026 14.2868 16.5796 14.132 16.4247L14.082 16.3747C13.8856 16.1826 13.6362 16.0537 13.3659 16.0047C13.0955 15.9557 12.8167 15.9887 12.5654 16.0997C12.3189 16.2053 12.1087 16.3807 11.9606 16.6043C11.8126 16.8279 11.7331 17.0899 11.732 17.358V17.4997C11.732 17.9417 11.5564 18.3656 11.2439 18.6782C10.9313 18.9907 10.5074 19.1663 10.0654 19.1663C9.62334 19.1663 9.19941 18.9907 8.88685 18.6782C8.57429 18.3656 8.3987 17.9417 8.3987 17.4997V17.4247C8.39225 17.1488 8.30296 16.8813 8.14246 16.6569C7.98195 16.4325 7.75764 16.2616 7.4987 16.1663C7.24735 16.0554 6.96854 16.0223 6.69821 16.0713C6.42788 16.1204 6.17843 16.2492 5.98203 16.4413L5.93203 16.4913C5.77724 16.6463 5.59343 16.7692 5.3911 16.8531C5.18877 16.937 4.97189 16.9802 4.75286 16.9802C4.53384 16.9802 4.31696 16.937 4.11463 16.8531C3.9123 16.7692 3.72849 16.6463 3.5737 16.4913C3.41874 16.3366 3.29581 16.1527 3.21193 15.9504C3.12806 15.7481 3.08489 15.5312 3.08489 15.3122C3.08489 15.0931 3.12806 14.8763 3.21193 14.6739C3.29581 14.4716 3.41874 14.2878 3.5737 14.133L3.6237 14.083C3.81581 13.8866 3.94469 13.6372 3.9937 13.3668C4.04272 13.0965 4.00963 12.8177 3.8987 12.5663C3.79306 12.3199 3.61766 12.1097 3.39409 11.9616C3.17051 11.8135 2.90852 11.7341 2.64036 11.733H2.4987C2.05667 11.733 1.63275 11.5574 1.32019 11.2449C1.00763 10.9323 0.832031 10.5084 0.832031 10.0663C0.832031 9.62431 1.00763 9.20039 1.32019 8.88783C1.63275 8.57527 2.05667 8.39967 2.4987 8.39967H2.5737C2.84953 8.39322 3.11703 8.30394 3.34145 8.14343C3.56586 7.98293 3.73679 7.75862 3.83203 7.49967C3.94296 7.24833 3.97605 6.96951 3.92703 6.69918C3.87802 6.42885 3.74914 6.17941 3.55703 5.98301L3.50703 5.93301C3.35207 5.77822 3.22914 5.5944 3.14526 5.39207C3.06139 5.18974 3.01822 4.97287 3.01822 4.75384C3.01822 4.53481 3.06139 4.31794 3.14526 4.11561C3.22914 3.91328 3.35207 3.72946 3.50703 3.57467C3.66182 3.41971 3.84563 3.29678 4.04796 3.21291C4.25029 3.12903 4.46717 3.08586 4.6862 3.08586C4.90522 3.08586 5.1221 3.12903 5.32443 3.21291C5.52676 3.29678 5.71058 3.41971 5.86536 3.57467L5.91536 3.62467C6.11176 3.81679 6.36121 3.94566 6.63154 3.99468C6.90187 4.04369 7.18068 4.0106 7.43203 3.89967H7.4987C7.74517 3.79404 7.95538 3.61864 8.10344 3.39506C8.2515 3.17149 8.33096 2.9095 8.33203 2.64134V2.49967C8.33203 2.05765 8.50763 1.63372 8.82019 1.32116C9.13275 1.0086 9.55667 0.833008 9.9987 0.833008C10.4407 0.833008 10.8646 1.0086 11.1772 1.32116C11.4898 1.63372 11.6654 2.05765 11.6654 2.49967V2.57467C11.6664 2.84283 11.7459 3.10482 11.894 3.3284C12.042 3.55197 12.2522 3.72737 12.4987 3.83301C12.75 3.94394 13.0289 3.97703 13.2992 3.92801C13.5695 3.879 13.819 3.75012 14.0154 3.55801L14.0654 3.50801C14.2202 3.35305 14.404 3.23012 14.6063 3.14624C14.8086 3.06237 15.0255 3.0192 15.2445 3.0192C15.4636 3.0192 15.6804 3.06237 15.8828 3.14624C16.0851 3.23012 16.2689 3.35305 16.4237 3.50801C16.5787 3.6628 16.7016 3.84661 16.7855 4.04894C16.8693 4.25127 16.9125 4.46815 16.9125 4.68717C16.9125 4.9062 16.8693 5.12308 16.7855 5.32541C16.7016 5.52774 16.5787 5.71155 16.4237 5.86634L16.3737 5.91634C16.1816 6.11274 16.0527 6.36219 16.0037 6.63252C15.9547 6.90285 15.9878 7.18166 16.0987 7.43301V7.49967C16.2043 7.74615 16.3797 7.95635 16.6033 8.10442C16.8269 8.25248 17.0889 8.33194 17.357 8.33301H17.4987C17.9407 8.33301 18.3646 8.5086 18.6772 8.82116C18.9898 9.13372 19.1654 9.55765 19.1654 9.99967C19.1654 10.4417 18.9898 10.8656 18.6772 11.1782C18.3646 11.4907 17.9407 11.6663 17.4987 11.6663H17.4237C17.1555 11.6674 16.8936 11.7469 16.67 11.8949C16.4464 12.043 16.271 12.2532 16.1654 12.4997Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\"\r\n                                                stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20261\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'\" class=\"me-2\" (click)=\"onAction('duplicate', data)\" [ngClass]=\"true ? 'cursor-pointer' : ''\" >\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_2254_20265)\">\r\n                                            <path\r\n                                                d=\"M4.16797 12.5003H3.33464C2.89261 12.5003 2.46868 12.3247 2.15612 12.0122C1.84356 11.6996 1.66797 11.2757 1.66797 10.8337V3.33366C1.66797 2.89163 1.84356 2.46771 2.15612 2.15515C2.46868 1.84259 2.89261 1.66699 3.33464 1.66699H10.8346C11.2767 1.66699 11.7006 1.84259 12.0131 2.15515C12.3257 2.46771 12.5013 2.89163 12.5013 3.33366V4.16699M9.16797 7.50033H16.668C17.5884 7.50033 18.3346 8.24652 18.3346 9.16699V16.667C18.3346 17.5875 17.5884 18.3337 16.668 18.3337H9.16797C8.24749 18.3337 7.5013 17.5875 7.5013 16.667V9.16699C7.5013 8.24652 8.24749 7.50033 9.16797 7.50033Z\"\r\n                                                [attr.stroke]=\"true ? '#667085' : '#D0D5DD'\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2254_20265\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" (click)=\"onAction('delete', data)\" [ngClass]=\"!data?.publish  ? 'cursor-pointer' : ''\">\r\n                                    <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_3162_10414)\">\r\n                                            <path\r\n                                                d=\"M12.5 15.0228H14.1667M14.1667 15.0228H27.5M14.1667 15.0228V26.6895C14.1667 27.1315 14.3423 27.5554 14.6548 27.868C14.9674 28.1805 15.3913 28.3561 15.8333 28.3561H24.1667C24.6087 28.3561 25.0326 28.1805 25.3452 27.868C25.6577 27.5554 25.8333 27.1315 25.8333 26.6895V15.0228H14.1667ZM16.6667 15.0228V13.3561C16.6667 12.9141 16.8423 12.4902 17.1548 12.1776C17.4674 11.865 17.8913 11.6895 18.3333 11.6895H21.6667C22.1087 11.6895 22.5326 11.865 22.8452 12.1776C23.1577 12.4902 23.3333 12.9141 23.3333 13.3561V15.0228M18.3333 19.1895V24.1895M21.6667 19.1895V24.1895\"\r\n                                                [attr.stroke]=\"!data?.publish ? '#667085' :'#D0D5DD'\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_3162_10414\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10.0234)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                            <td *ngIf=\"(gs.userAccess | async)?.TangoTrax_Task_isEdit\" >\r\n                                <span class=\"form-check form-switch\">\r\n                                    <input [checked]=\"data.publish\" (change)=\"publish($event, data,i)\" type=\"checkbox\" role=\"switch\" id=\"support\"\r\n                                        class=\"form-check-input mt-3 cursor-pointer\">\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n            <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".rotate{rotate:180deg;transition:1s}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.GlobalStateService }, { type: i2$2.PageInfoService }, { type: TraxService }, { type: i1$2.Router }, { type: i2.NgbModal }, { type: i3.ToastService }] });
 class FlagsNewComponent {
@@ -20187,7 +20224,7 @@ const routes = [
     },
     {
         path: 'audit',
-        loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-DjDVouY5.mjs').then((m) => m.EyeTestAuditModule)
+        loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-SfQMeY8F.mjs').then((m) => m.EyeTestAuditModule)
     }
     // {
     //   path:'task',
@@ -20832,4 +20869,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 export { TraxService as T, TangoAnalyseTraxModule as a, TangoAnalyseTraxComponent as b };
-//# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-fgU4Z8FP.mjs.map
+//# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-PAL7XzVi.mjs.map