tango-app-ui-analyse-trax 3.6.2-bulktask-2 → 3.6.2-bulktask-4

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 (14) hide show
  1. package/esm2022/lib/components/add-multitask/add-multitask.component.mjs +8 -6
  2. package/esm2022/lib/components/add-multitask/bulkcreationmodel/bulkcreationmodel.component.mjs +3 -2
  3. package/esm2022/lib/components/dashboard-info/dashboard-info.component.mjs +2 -2
  4. package/esm2022/lib/components/gallery/gallery.component.mjs +94 -4
  5. package/esm2022/lib/components/task-info/task-info.component.mjs +11 -7
  6. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-B6bePYMW.mjs → tango-app-ui-analyse-trax-eye-test-audit.module-TjzMSq1X.mjs} +2 -2
  7. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-B6bePYMW.mjs.map → tango-app-ui-analyse-trax-eye-test-audit.module-TjzMSq1X.mjs.map} +1 -1
  8. package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CVvZ9PNQ.mjs} +115 -18
  9. package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CVvZ9PNQ.mjs.map +1 -0
  10. package/fesm2022/tango-app-ui-analyse-trax.mjs +1 -1
  11. package/lib/components/gallery/gallery.component.d.ts +2 -0
  12. package/lib/components/task-info/task-info.component.d.ts +1 -0
  13. package/package.json +1 -1
  14. package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs.map +0 -1
package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CVvZ9PNQ.mjs} RENAMED
@@ -8702,7 +8702,7 @@ class AddMultitaskComponent {
8702
8702
  }
8703
8703
  }
8704
8704
  cancel() {
8705
- this.activeModal.close('close');
8705
+ this.activeModal.close('submit');
8706
8706
  const triggerButton = document.querySelector('#triggerButtonId');
8707
8707
  triggerButton?.focus();
8708
8708
  }
@@ -8720,6 +8720,8 @@ class AddMultitaskComponent {
8720
8720
  "section_id": this.payload.sectionInfo.section_id,
8721
8721
  "sectionName": this.payload.sectionInfo.sectionName,
8722
8722
  "qno": response[0].questions[0].qno,
8723
+ "showcomment": this.showcomment,
8724
+ "excelData": this.excelData,
8723
8725
  "checklistDescription": this.taskForm.value.checklistDescription,
8724
8726
  "parentQuestion": this.payload.inputData.parentQuestion ? this.payload.inputData.parentQuestion : this.payload.inputData.qno,
8725
8727
  },
@@ -8920,10 +8922,10 @@ class AddMultitaskComponent {
8920
8922
  formData.append('clientId', this.clientId);
8921
8923
  this.traxService.taskImageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
8922
8924
  next: (res) => {
8923
- if (res.data.imgUrl) {
8925
+ if (res.data.path) {
8924
8926
  this.selectedFile = file;
8925
8927
  this.previewUrl = URL.createObjectURL(file);
8926
- this.uploadedFiles.push(res.data.imgUrl);
8928
+ this.uploadedFiles.push(res.data.path);
8927
8929
  if (this.fileInput) {
8928
8930
  this.fileInput.nativeElement.value = '';
8929
8931
  }
@@ -9079,11 +9081,11 @@ class AddMultitaskComponent {
9079
9081
  this.destroy$.complete();
9080
9082
  }
9081
9083
  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 });
9082
- 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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\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\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 mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [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\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (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\" [disabled]=\"!this.taskForm.valid||submitted\"\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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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 <!-- <h5 class=\"label-name1 my-2\">\r\n {{payload.checklistName}}\r\n </h5> -->\r\n <div class=\"text-gray-600\">\r\n {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n </div>\r\n <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\">\r\n <div class=\"row\">\r\n <!-- <div *ngFor=\"let pair of group\" class=\"col-md-12\" > -->\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 </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\"\r\n (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n\r\n <button class=\"carousel-control-next\"\r\n *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\" (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n </div>\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 <div class=\"col-md-6\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\">\r\n <div class=\"row\">\r\n <!-- <div *ngFor=\"let pair of group\" class=\"col-md-12\" > -->\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 </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\"\r\n (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n\r\n <button class=\"carousel-control-next\"\r\n *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\" (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n </div>\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==='multiplechoicemultiple'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"col-md-12\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n 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\" (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}\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: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
9084
+ 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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\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 mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [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\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (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\" [disabled]=\"!this.taskForm.valid||submitted\"\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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\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\" (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}\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: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
9083
9085
  }
9084
9086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddMultitaskComponent, decorators: [{
9085
9087
  type: Component,
9086
- 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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\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\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 mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [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\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (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\" [disabled]=\"!this.taskForm.valid||submitted\"\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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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 <!-- <h5 class=\"label-name1 my-2\">\r\n {{payload.checklistName}}\r\n </h5> -->\r\n <div class=\"text-gray-600\">\r\n {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n </div>\r\n <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\">\r\n <div class=\"row\">\r\n <!-- <div *ngFor=\"let pair of group\" class=\"col-md-12\" > -->\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 </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\"\r\n (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n\r\n <button class=\"carousel-control-next\"\r\n *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\" (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n </div>\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 <div class=\"col-md-6\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\">\r\n <div class=\"row\">\r\n <!-- <div *ngFor=\"let pair of group\" class=\"col-md-12\" > -->\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 </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\"\r\n (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n\r\n <button class=\"carousel-control-next\"\r\n *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\" (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n </div>\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==='multiplechoicemultiple'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"col-md-12\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n 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\" (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}\n"] }]
9088
+ 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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\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 mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [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\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (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\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (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\" [disabled]=\"!this.taskForm.valid||submitted\"\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 width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <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=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\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\" (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}\n"] }]
9087
9089
  }], 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: [{
9088
9090
  type: Input
9089
9091
  }], sourceCheckList_id: [{
@@ -9166,12 +9168,13 @@ class BulkcreationmodelComponent {
9166
9168
  modalRef.result.then((result) => {
9167
9169
  console.log(result);
9168
9170
  if (result == 'submit') {
9171
+ console.log("[[[[[[[[");
9169
9172
  this.activeModal.close('submit');
9170
9173
  }
9171
9174
  });
9172
9175
  }
9173
9176
  closeactivepopup() {
9174
- this.activeModal.close('submit');
9177
+ this.modalService.dismissAll();
9175
9178
  }
9176
9179
  validateDetails() {
9177
9180
  console.log(this.headerData?.client);
@@ -9878,6 +9881,7 @@ class GalleryComponent {
9878
9881
  selectedUsers = [];
9879
9882
  inputDataTask;
9880
9883
  otherTaskData;
9884
+ selectAllTask = false;
9881
9885
  refImage = [];
9882
9886
  constructor(fb, gs, traxService, cd, modalService, route, router, toastService, location, pageInfo) {
9883
9887
  this.fb = fb;
@@ -10285,6 +10289,10 @@ class GalleryComponent {
10285
10289
  else {
10286
10290
  this.userList = res.data;
10287
10291
  this.galleryForm.get('userList')?.setValue(this.userList);
10292
+ if ((this.queryParams.storeId)) {
10293
+ this.galleryForm.get('userList')?.setValue([]);
10294
+ this.galleryForm.get('filtertype')?.setValue('Clusters');
10295
+ }
10288
10296
  if (this.queryParams.checklistType == 'task') {
10289
10297
  this.getAllTasks(true);
10290
10298
  }
@@ -11491,7 +11499,91 @@ class GalleryComponent {
11491
11499
  }
11492
11500
  });
11493
11501
  }
11502
+ selectedAllTask(event, checklist, data, checklistInfo, sectionInfo) {
11503
+ console.log(data);
11504
+ let answer = [];
11505
+ answer = data.userAnswer.map((data) => data.answer);
11506
+ console.log(answer);
11507
+ if (event.target.checked) {
11508
+ this.selectAllTask = event.target.checked;
11509
+ console.log(this.viewChecklistsData);
11510
+ this.viewChecklistsData.checklistAnswers.map((details) => {
11511
+ details.questionAnswer[0].questions[0].checked = true;
11512
+ });
11513
+ console.log(this.viewChecklistsData);
11514
+ this.inputDataTask = data;
11515
+ this.refImage = [...this.refImage, ...answer];
11516
+ console.log(this.refImage);
11517
+ this.otherTaskData = {
11518
+ sectionInfo: sectionInfo,
11519
+ };
11520
+ let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
11521
+ let users = this.galleryForm.value.userList.map((data) => data.userEmail);
11522
+ this.viewChecklistsoptions = {
11523
+ "fromDate": this.galleryForm.value.fromDate,
11524
+ "toDate": this.galleryForm.value.toDate,
11525
+ "ChecklistType": this.galleryForm.value.checkListType,
11526
+ "checklistName": this.galleryForm.value.checklistName,
11527
+ "filtertype": this.galleryForm.value.filtertype,
11528
+ "storeId": stores,
11529
+ "userEmail": users,
11530
+ "answerType": this.galleryForm.value.answerType,
11531
+ "offset": 0,
11532
+ "limit": 10000,
11533
+ "checklistId": this.galleryForm.value.sourceCheckList_id,
11534
+ "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
11535
+ "viewFlag": this.galleryForm.value.viewFlag,
11536
+ "viewRedo": this.galleryForm.value.viewRedo,
11537
+ "questions": this.selectedSection,
11538
+ "filter": this.galleryForm.value.filter,
11539
+ "approveFilter": this.approveFilter,
11540
+ };
11541
+ this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
11542
+ next: (res) => {
11543
+ if (res && res.code === 200) {
11544
+ console.log(res.data);
11545
+ res.data.checklistAnswers.forEach((ele) => {
11546
+ if (this.galleryForm.value.filtertype === 'Clusters') {
11547
+ this.selectedStores.push({
11548
+ storeName: ele.storeProfile.storeName,
11549
+ storeId: ele.storeProfile.store_id,
11550
+ userEmail: ele.storeProfile.userEmail,
11551
+ checklistId: ele.checklistInfo.checklistId,
11552
+ section_id: sectionInfo.section_id,
11553
+ uniqueNo: data.uniqueNo
11554
+ });
11555
+ }
11556
+ else if (this.galleryForm.value.filtertype === 'Teams') {
11557
+ this.selectedUsers.push({
11558
+ userName: ele.storeProfile.userName,
11559
+ userEmail: ele.storeProfile.userEmail,
11560
+ checklistId: ele.checklistInfo.checklistId,
11561
+ section_id: sectionInfo.section_id,
11562
+ uniqueNo: data.uniqueNo
11563
+ });
11564
+ }
11565
+ });
11566
+ }
11567
+ }
11568
+ });
11569
+ }
11570
+ else {
11571
+ this.selectAllTask = false;
11572
+ this.viewChecklistsData.checklistAnswers.map((details) => {
11573
+ details.questionAnswer[0].questions[0].checked = false;
11574
+ });
11575
+ console.log(this.selectedStores);
11576
+ this.refImage = this.refImage.filter((data) => data.answer);
11577
+ if (this.galleryForm.value.filtertype === 'Clusters') {
11578
+ this.selectedStores = [];
11579
+ }
11580
+ else {
11581
+ this.selectedUsers = [];
11582
+ }
11583
+ }
11584
+ }
11494
11585
  selectedmultiTask(event, checklist, data, checklistInfo, sectionInfo) {
11586
+ console.log(data);
11495
11587
  let answer = [];
11496
11588
  answer = data.userAnswer.map((data) => data.answer);
11497
11589
  console.log(answer);
@@ -12321,7 +12413,8 @@ class GalleryComponent {
12321
12413
  // }
12322
12414
  data.questionReferenceImage = [data.questionReferenceImage];
12323
12415
  const modalRef = this.modalService.open(AddTaskComponent, {
12324
- backdrop: 'static'
12416
+ backdrop: 'static',
12417
+ centered: true, size: 'lg',
12325
12418
  });
12326
12419
  modalRef.componentInstance.type = type;
12327
12420
  modalRef.componentInstance.operationtype = this.galleryForm.value.type;
@@ -12555,11 +12648,11 @@ class GalleryComponent {
12555
12648
  document.body.removeChild(a);
12556
12649
  }
12557
12650
  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 });
12558
- 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'\" [nameField]=\"'label'\"\r\n [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></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'\" >\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\" (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\" >Create Task</button>\r\n \r\n </div>\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'\" >\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\" (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n \r\n </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 <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 <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\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" >\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" [disabled]=\"question.redo\" (click)=\"selectedmultiTask($event,checklist,question,checklist?.checklistInfo,section)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n </div>\r\n <div class=\"col-md-3 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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\" (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\" (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\" *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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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 :\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\" (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\" *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\" (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\" *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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"></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\"\r\n *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\"\r\n *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\" *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\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\" [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\"\r\n *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 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\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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'\">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\"\r\n *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\" role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\" role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n \r\n\r\n <div class=\"modal-body d-flex align-items-center justify-content-center position-relative\"\r\n >\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\" 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\" role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n \r\n\r\n <div class=\"modal-body d-flex align-items-center justify-content-center position-relative\"\r\n >\r\n \r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\" 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'\"\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'\"\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\"\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}\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" }] });
12651
+ 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&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!viewChecklistsData?.checklistAnswers[0]?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\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=\"form-check-label ms-2\" for=\"flexCheckDefault\">\r\n Select All\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&&this.galleryForm.value.type!=='task'\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\">Create Task</button>\r\n\r\n </div>\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&this.galleryForm.value.type!=='task'&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('redo')\">\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_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\" 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 </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 <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(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\"\r\n (click)=\"selectedmultiTask($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\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\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'\"\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'\"\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\"\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}\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" }] });
12559
12652
  }
12560
12653
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
12561
12654
  type: Component,
12562
- 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'\" [nameField]=\"'label'\"\r\n [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></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'\" >\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\" (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\" >Create Task</button>\r\n \r\n </div>\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'\" >\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\" (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n \r\n </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 <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 <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\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" >\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" [disabled]=\"question.redo\" (click)=\"selectedmultiTask($event,checklist,question,checklist?.checklistInfo,section)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n </div>\r\n <div class=\"col-md-3 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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\" (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\" (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\" *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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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 :\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\" (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\" *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\" (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\" *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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"></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\"\r\n *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\"\r\n *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\" *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\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\" [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\"\r\n *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 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\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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))\" 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\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 <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\" 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\" (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\" *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" 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\" rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\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\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\"></feGaussianBlur>\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 </feColorMatrix>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"></feBlend>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" 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'\">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\"\r\n *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\" role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\" role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n \r\n\r\n <div class=\"modal-body d-flex align-items-center justify-content-center position-relative\"\r\n >\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\" 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\" role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n \r\n\r\n <div class=\"modal-body d-flex align-items-center justify-content-center position-relative\"\r\n >\r\n \r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\" 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'\"\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'\"\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\"\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}\n"] }]
12655
+ 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&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!viewChecklistsData?.checklistAnswers[0]?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\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=\"form-check-label ms-2\" for=\"flexCheckDefault\">\r\n Select All\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&&this.galleryForm.value.type!=='task'\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\">Create Task</button>\r\n\r\n </div>\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&this.galleryForm.value.type!=='task'&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('redo')\">\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_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\" 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 </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 <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(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\"\r\n (click)=\"selectedmultiTask($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\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\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'\"\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'\"\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\"\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}\n"] }]
12563
12656
  }], 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: [{
12564
12657
  type: HostListener,
12565
12658
  args: ['document:click', ['$event']]
@@ -13854,7 +13947,7 @@ class DashboardInfoComponent {
13854
13947
  const payload = {
13855
13948
  "fromDate": this.headerData?.date.startDate,
13856
13949
  "toDate": this.headerData?.date.endDate,
13857
- "checklistId": item?.idList,
13950
+ "checklistId": [item?._id],
13858
13951
  "sourceCheckList_id": '',
13859
13952
  "checklistName": item.checkListName,
13860
13953
  "fileType": type,
@@ -19021,6 +19114,7 @@ class TaskInfoComponent {
19021
19114
  taskInfoLoading = true;
19022
19115
  taskInfoNoData = false;
19023
19116
  TaskInfoData = [];
19117
+ showZoneData = false;
19024
19118
  taskDropdown = [];
19025
19119
  taskselectControl = new FormControl('');
19026
19120
  form;
@@ -19157,8 +19251,8 @@ class TaskInfoComponent {
19157
19251
  this.taskInfoLoading = true;
19158
19252
  this.taskInfoNoData = true;
19159
19253
  const requestData = {
19160
- // fromDate: this.headerData.date.startDate,
19161
- // toDate: this.headerData.date.endDate,
19254
+ fromDate: this.headerData.date.startDate,
19255
+ toDate: this.headerData.date.endDate,
19162
19256
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
19163
19257
  userEmailes: this.userEmailes,
19164
19258
  clientId: this.headerData.client,
@@ -19178,6 +19272,9 @@ class TaskInfoComponent {
19178
19272
  this.taskInfoLoading = false;
19179
19273
  if (response?.code === 200 && response?.status === "success") {
19180
19274
  this.TaskInfoData = response.data.taskInfo || [];
19275
+ if (this.TaskInfoData[0]?.checkListFrom == 'api') {
19276
+ this.showZoneData = true;
19277
+ }
19181
19278
  this.totalItems = response.data.totalCount;
19182
19279
  this.setPaginationSizes();
19183
19280
  this.taskInfoLoading = false;
@@ -19228,8 +19325,8 @@ class TaskInfoComponent {
19228
19325
  onExport() {
19229
19326
  this.currentPage = 1;
19230
19327
  const requestData = {
19231
- // fromDate: this.headerData.date.startDate,
19232
- // toDate: this.headerData.date.endDate,
19328
+ fromDate: this.headerData.date.startDate,
19329
+ toDate: this.headerData.date.endDate,
19233
19330
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
19234
19331
  userEmailes: this.userEmailes,
19235
19332
  clientId: this.headerData.client,
@@ -19340,11 +19437,11 @@ class TaskInfoComponent {
19340
19437
  }
19341
19438
  }
19342
19439
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskInfoComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: TraxService }, { token: i2$2.PageInfoService }, { token: i2.NgbModal }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
19343
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskInfoComponent, selector: "lib-task-info", ngImport: i0, template: "<div class=\"col-lg-12 mt-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard/task']\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\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\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <lib-select [items]=\"taskDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedTask]\" (selected)=\"onTaskSelect($event)\">\r\n </lib-select>\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap\">\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedTask?.createdByName || '--' }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ totalItems || '--' }} {{selectedTask?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M13.0387 15.7501C12.2028 15.7501 11.4937 15.4591 10.9117 14.8771C10.3298 14.2941 10.0388 13.5851 10.0388 12.7501C10.0388 11.9151 10.3298 11.2061 10.9117 10.6231C11.4937 10.0411 12.2028 9.75005 13.0387 9.75005C13.8737 9.75005 14.5825 10.0411 15.165 10.6231C15.7475 11.2051 16.0388 11.9141 16.0387 12.7501C16.0387 13.5856 15.7475 14.2946 15.165 14.8771C14.5825 15.4596 13.8737 15.7506 13.0387 15.7501ZM13.3267 12.6263V10.8751C13.3267 10.7981 13.298 10.7306 13.2405 10.6726C13.1825 10.6151 13.115 10.5863 13.038 10.5863C12.9615 10.5863 12.8942 10.6153 12.8363 10.6733C12.7787 10.7308 12.75 10.7981 12.75 10.8751V12.6248C12.75 12.7013 12.764 12.7753 12.792 12.8468C12.82 12.9188 12.8665 12.9876 12.9315 13.0531L14.0753 14.1968C14.1313 14.2523 14.1973 14.2826 14.2733 14.2876C14.3492 14.2926 14.4198 14.2623 14.4847 14.1968C14.5503 14.1318 14.583 14.0636 14.583 13.9921C14.583 13.9206 14.5505 13.8523 14.4855 13.7873L13.3267 12.6263ZM4.21125 15.0001C3.87825 15.0001 3.59325 14.8813 3.35625 14.6438C3.11875 14.4068 3 14.1218 3 13.7888V4.2113C3 3.8783 3.11875 3.5933 3.35625 3.3563C3.59325 3.1188 3.87825 3.00005 4.21125 3.00005H7.689C7.759 2.70655 7.91475 2.46005 8.15625 2.26055C8.39775 2.06105 8.679 1.9613 9 1.9613C9.327 1.9613 9.6105 2.0613 9.8505 2.2613C10.0905 2.4603 10.2455 2.70655 10.3155 3.00005H13.788C14.1215 3.00005 14.4067 3.1188 14.6437 3.3563C14.8812 3.5933 15 3.8783 15 4.2113V8.7263C14.871 8.6598 14.749 8.60155 14.634 8.55155C14.519 8.50155 14.391 8.4568 14.25 8.4173V4.2113C14.25 4.0963 14.202 3.99055 14.106 3.89405C14.0095 3.79805 13.9038 3.75005 13.7887 3.75005H12V4.8173C12 4.9888 11.9425 5.1328 11.8275 5.2493C11.7125 5.3653 11.57 5.4233 11.4 5.4233H6.6C6.43 5.4233 6.2875 5.3653 6.1725 5.2493C6.0575 5.1328 6 4.9888 6 4.8173V3.75005H4.21125C4.09625 3.75005 3.9905 3.79805 3.894 3.89405C3.798 3.99055 3.75 4.0963 3.75 4.2113V13.7888C3.75 13.9233 3.79325 14.0338 3.87975 14.1203C3.96625 14.2068 4.07675 14.2501 4.21125 14.2501H8.8065C8.8465 14.3901 8.89375 14.5203 8.94825 14.6408C9.00325 14.7608 9.07325 14.8806 9.15825 15.0001H4.212H4.21125ZM9.00225 3.92255C9.17475 3.92255 9.3185 3.86455 9.4335 3.74855C9.5485 3.63155 9.606 3.48705 9.606 3.31505C9.606 3.14255 9.54775 2.9988 9.43125 2.8838C9.31425 2.7688 9.16975 2.7113 8.99775 2.7113C8.82525 2.7113 8.6815 2.7698 8.5665 2.8868C8.4515 3.0033 8.394 3.14755 8.394 3.31955C8.394 3.49205 8.4525 3.6358 8.5695 3.7508C8.686 3.8658 8.83025 3.92255 9.00225 3.92255Z\" fill=\"#667085\"/>\r\n </svg><span ngbTooltip=\"Due Date\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">{{ selectedTask?.scheduleEndTime_iso || \"--\" }}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <!-- *ngIf=\"refreshTaskDropdown\" -->\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\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 d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!TaskInfoData.length\">\r\n <!-- Export Icon -->\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!taskInfoLoading && !taskInfoNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Name\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Email\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Due on</th>\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'submitTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Approved By</th>\r\n <!-- class=\"cursor-pointer\" (click)=\"sortData('approvalTime_string')\" -->\r\n <th >Approved On\r\n <!-- <svg [ngClass]=\"sortColumName === 'approvalTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n 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 === 'approvalTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let taskinfo of TaskInfoData\">\r\n <!-- (click)=\"storeView(taskinfo)\" -->\r\n <td>\r\n <span \r\n class=\"table-title\">{{ taskinfo.storeName || '--' }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userEmail || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.scheduleEndTime_iso ?\r\n taskinfo.scheduleEndTime_iso.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-danger': taskinfo.checklistStatus === 'Open',\r\n 'badge-light-primary': taskinfo.checklistStatus === 'In Progress',\r\n 'badge-light-success': taskinfo.checklistStatus === 'Submitted'\r\n }\"> <span *ngIf=\"taskinfo.redoStatus\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7166_57025)\">\r\n <path \r\n d=\"M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507\"\r\n [attr.stroke]=\"getRedoSvgColor(taskinfo.checklistStatus)\"\r\n stroke-width=\"2\" \r\n stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7166_57025\">\r\n <rect width=\"12\" height=\"13\" fill=\"white\" transform=\"translate(0 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n {{ taskinfo.checklistStatus | titlecase }}\r\n </span>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.submitTime_string ?\r\n taskinfo.submitTime_string.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalByEmail || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Open' && taskinfo.checklistStatus !== 'In Progress'\"\r\n (click)=\"navigateToGallery(taskinfo)\" class=\"cursor-pointer table-title\">\r\n <span>\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Open' || taskinfo.checklistStatus === 'In Progress' && taskinfo.checklistStatus !== 'Submitted'\"\r\n class=\"table-title\">\r\n <span ngbTooltip=\"Required Submitted status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n \r\n \r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"taskinfoedit(taskinfo)\"\r\n class=\"cursor-pointer ms-6\">\r\n <span>\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"ms-6\">\r\n <span ngbTooltip=\"Required Open or In Progress status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"taskInfoLoading\">\r\n <div 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 </ng-container>\r\n <ng-container *ngIf=\"taskInfoNoData && !taskInfoLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Task Info</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!taskInfoLoading && !taskInfoNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.taskname{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\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: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: 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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
19440
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskInfoComponent, selector: "lib-task-info", ngImport: i0, template: "<div class=\"col-lg-12 mt-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard/task']\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\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\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <lib-select [items]=\"taskDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedTask]\" (selected)=\"onTaskSelect($event)\">\r\n </lib-select>\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap\">\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedTask?.createdByName || '--' }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ totalItems || '--' }} {{selectedTask?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M13.0387 15.7501C12.2028 15.7501 11.4937 15.4591 10.9117 14.8771C10.3298 14.2941 10.0388 13.5851 10.0388 12.7501C10.0388 11.9151 10.3298 11.2061 10.9117 10.6231C11.4937 10.0411 12.2028 9.75005 13.0387 9.75005C13.8737 9.75005 14.5825 10.0411 15.165 10.6231C15.7475 11.2051 16.0388 11.9141 16.0387 12.7501C16.0387 13.5856 15.7475 14.2946 15.165 14.8771C14.5825 15.4596 13.8737 15.7506 13.0387 15.7501ZM13.3267 12.6263V10.8751C13.3267 10.7981 13.298 10.7306 13.2405 10.6726C13.1825 10.6151 13.115 10.5863 13.038 10.5863C12.9615 10.5863 12.8942 10.6153 12.8363 10.6733C12.7787 10.7308 12.75 10.7981 12.75 10.8751V12.6248C12.75 12.7013 12.764 12.7753 12.792 12.8468C12.82 12.9188 12.8665 12.9876 12.9315 13.0531L14.0753 14.1968C14.1313 14.2523 14.1973 14.2826 14.2733 14.2876C14.3492 14.2926 14.4198 14.2623 14.4847 14.1968C14.5503 14.1318 14.583 14.0636 14.583 13.9921C14.583 13.9206 14.5505 13.8523 14.4855 13.7873L13.3267 12.6263ZM4.21125 15.0001C3.87825 15.0001 3.59325 14.8813 3.35625 14.6438C3.11875 14.4068 3 14.1218 3 13.7888V4.2113C3 3.8783 3.11875 3.5933 3.35625 3.3563C3.59325 3.1188 3.87825 3.00005 4.21125 3.00005H7.689C7.759 2.70655 7.91475 2.46005 8.15625 2.26055C8.39775 2.06105 8.679 1.9613 9 1.9613C9.327 1.9613 9.6105 2.0613 9.8505 2.2613C10.0905 2.4603 10.2455 2.70655 10.3155 3.00005H13.788C14.1215 3.00005 14.4067 3.1188 14.6437 3.3563C14.8812 3.5933 15 3.8783 15 4.2113V8.7263C14.871 8.6598 14.749 8.60155 14.634 8.55155C14.519 8.50155 14.391 8.4568 14.25 8.4173V4.2113C14.25 4.0963 14.202 3.99055 14.106 3.89405C14.0095 3.79805 13.9038 3.75005 13.7887 3.75005H12V4.8173C12 4.9888 11.9425 5.1328 11.8275 5.2493C11.7125 5.3653 11.57 5.4233 11.4 5.4233H6.6C6.43 5.4233 6.2875 5.3653 6.1725 5.2493C6.0575 5.1328 6 4.9888 6 4.8173V3.75005H4.21125C4.09625 3.75005 3.9905 3.79805 3.894 3.89405C3.798 3.99055 3.75 4.0963 3.75 4.2113V13.7888C3.75 13.9233 3.79325 14.0338 3.87975 14.1203C3.96625 14.2068 4.07675 14.2501 4.21125 14.2501H8.8065C8.8465 14.3901 8.89375 14.5203 8.94825 14.6408C9.00325 14.7608 9.07325 14.8806 9.15825 15.0001H4.212H4.21125ZM9.00225 3.92255C9.17475 3.92255 9.3185 3.86455 9.4335 3.74855C9.5485 3.63155 9.606 3.48705 9.606 3.31505C9.606 3.14255 9.54775 2.9988 9.43125 2.8838C9.31425 2.7688 9.16975 2.7113 8.99775 2.7113C8.82525 2.7113 8.6815 2.7698 8.5665 2.8868C8.4515 3.0033 8.394 3.14755 8.394 3.31955C8.394 3.49205 8.4525 3.6358 8.5695 3.7508C8.686 3.8658 8.83025 3.92255 9.00225 3.92255Z\" fill=\"#667085\"/>\r\n </svg><span ngbTooltip=\"Due Date\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">{{ selectedTask?.scheduleEndTime_iso || \"--\" }}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <!-- *ngIf=\"refreshTaskDropdown\" -->\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\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 d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!TaskInfoData.length\">\r\n <!-- Export Icon -->\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!taskInfoLoading && !taskInfoNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Name\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Email\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"showZoneData\" class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Type\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Due on</th>\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'submitTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Approved By</th>\r\n <!-- class=\"cursor-pointer\" (click)=\"sortData('approvalTime_string')\" -->\r\n <th >Approved On\r\n <!-- <svg [ngClass]=\"sortColumName === 'approvalTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n 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 === 'approvalTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let taskinfo of TaskInfoData\">\r\n <!-- (click)=\"storeView(taskinfo)\" -->\r\n <td>\r\n <span \r\n class=\"table-title\">{{ taskinfo.storeName || '--' }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userEmail || '--' }}\r\n </div>\r\n </td>\r\n <td *ngIf=\"showZoneData\">\r\n <div class=\"table-title\">\r\n {{ taskinfo.zoneName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.scheduleEndTime_iso ?\r\n taskinfo.scheduleEndTime_iso.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-danger': taskinfo.checklistStatus === 'Open',\r\n 'badge-light-primary': taskinfo.checklistStatus === 'In Progress',\r\n 'badge-light-success': taskinfo.checklistStatus === 'Submitted'\r\n }\"> <span *ngIf=\"taskinfo.redoStatus\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7166_57025)\">\r\n <path \r\n d=\"M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507\"\r\n [attr.stroke]=\"getRedoSvgColor(taskinfo.checklistStatus)\"\r\n stroke-width=\"2\" \r\n stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7166_57025\">\r\n <rect width=\"12\" height=\"13\" fill=\"white\" transform=\"translate(0 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n {{ taskinfo.checklistStatus | titlecase }}\r\n </span>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.submitTime_string ?\r\n taskinfo.submitTime_string.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalByEmail || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Open' && taskinfo.checklistStatus !== 'In Progress'\"\r\n (click)=\"navigateToGallery(taskinfo)\" class=\"cursor-pointer table-title\">\r\n <span>\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Open' || taskinfo.checklistStatus === 'In Progress' && taskinfo.checklistStatus !== 'Submitted'\"\r\n class=\"table-title\">\r\n <span ngbTooltip=\"Required Submitted status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n \r\n \r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"taskinfoedit(taskinfo)\"\r\n class=\"cursor-pointer ms-6\">\r\n <span>\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"ms-6\">\r\n <span ngbTooltip=\"Required Open or In Progress status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"taskInfoLoading\">\r\n <div 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 </ng-container>\r\n <ng-container *ngIf=\"taskInfoNoData && !taskInfoLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Task Info</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!taskInfoLoading && !taskInfoNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.taskname{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\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: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: 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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
19344
19441
  }
19345
19442
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskInfoComponent, decorators: [{
19346
19443
  type: Component,
19347
- args: [{ selector: 'lib-task-info', template: "<div class=\"col-lg-12 mt-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard/task']\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\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\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <lib-select [items]=\"taskDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedTask]\" (selected)=\"onTaskSelect($event)\">\r\n </lib-select>\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap\">\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedTask?.createdByName || '--' }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ totalItems || '--' }} {{selectedTask?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M13.0387 15.7501C12.2028 15.7501 11.4937 15.4591 10.9117 14.8771C10.3298 14.2941 10.0388 13.5851 10.0388 12.7501C10.0388 11.9151 10.3298 11.2061 10.9117 10.6231C11.4937 10.0411 12.2028 9.75005 13.0387 9.75005C13.8737 9.75005 14.5825 10.0411 15.165 10.6231C15.7475 11.2051 16.0388 11.9141 16.0387 12.7501C16.0387 13.5856 15.7475 14.2946 15.165 14.8771C14.5825 15.4596 13.8737 15.7506 13.0387 15.7501ZM13.3267 12.6263V10.8751C13.3267 10.7981 13.298 10.7306 13.2405 10.6726C13.1825 10.6151 13.115 10.5863 13.038 10.5863C12.9615 10.5863 12.8942 10.6153 12.8363 10.6733C12.7787 10.7308 12.75 10.7981 12.75 10.8751V12.6248C12.75 12.7013 12.764 12.7753 12.792 12.8468C12.82 12.9188 12.8665 12.9876 12.9315 13.0531L14.0753 14.1968C14.1313 14.2523 14.1973 14.2826 14.2733 14.2876C14.3492 14.2926 14.4198 14.2623 14.4847 14.1968C14.5503 14.1318 14.583 14.0636 14.583 13.9921C14.583 13.9206 14.5505 13.8523 14.4855 13.7873L13.3267 12.6263ZM4.21125 15.0001C3.87825 15.0001 3.59325 14.8813 3.35625 14.6438C3.11875 14.4068 3 14.1218 3 13.7888V4.2113C3 3.8783 3.11875 3.5933 3.35625 3.3563C3.59325 3.1188 3.87825 3.00005 4.21125 3.00005H7.689C7.759 2.70655 7.91475 2.46005 8.15625 2.26055C8.39775 2.06105 8.679 1.9613 9 1.9613C9.327 1.9613 9.6105 2.0613 9.8505 2.2613C10.0905 2.4603 10.2455 2.70655 10.3155 3.00005H13.788C14.1215 3.00005 14.4067 3.1188 14.6437 3.3563C14.8812 3.5933 15 3.8783 15 4.2113V8.7263C14.871 8.6598 14.749 8.60155 14.634 8.55155C14.519 8.50155 14.391 8.4568 14.25 8.4173V4.2113C14.25 4.0963 14.202 3.99055 14.106 3.89405C14.0095 3.79805 13.9038 3.75005 13.7887 3.75005H12V4.8173C12 4.9888 11.9425 5.1328 11.8275 5.2493C11.7125 5.3653 11.57 5.4233 11.4 5.4233H6.6C6.43 5.4233 6.2875 5.3653 6.1725 5.2493C6.0575 5.1328 6 4.9888 6 4.8173V3.75005H4.21125C4.09625 3.75005 3.9905 3.79805 3.894 3.89405C3.798 3.99055 3.75 4.0963 3.75 4.2113V13.7888C3.75 13.9233 3.79325 14.0338 3.87975 14.1203C3.96625 14.2068 4.07675 14.2501 4.21125 14.2501H8.8065C8.8465 14.3901 8.89375 14.5203 8.94825 14.6408C9.00325 14.7608 9.07325 14.8806 9.15825 15.0001H4.212H4.21125ZM9.00225 3.92255C9.17475 3.92255 9.3185 3.86455 9.4335 3.74855C9.5485 3.63155 9.606 3.48705 9.606 3.31505C9.606 3.14255 9.54775 2.9988 9.43125 2.8838C9.31425 2.7688 9.16975 2.7113 8.99775 2.7113C8.82525 2.7113 8.6815 2.7698 8.5665 2.8868C8.4515 3.0033 8.394 3.14755 8.394 3.31955C8.394 3.49205 8.4525 3.6358 8.5695 3.7508C8.686 3.8658 8.83025 3.92255 9.00225 3.92255Z\" fill=\"#667085\"/>\r\n </svg><span ngbTooltip=\"Due Date\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">{{ selectedTask?.scheduleEndTime_iso || \"--\" }}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <!-- *ngIf=\"refreshTaskDropdown\" -->\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\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 d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!TaskInfoData.length\">\r\n <!-- Export Icon -->\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!taskInfoLoading && !taskInfoNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Name\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Email\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Due on</th>\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'submitTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Approved By</th>\r\n <!-- class=\"cursor-pointer\" (click)=\"sortData('approvalTime_string')\" -->\r\n <th >Approved On\r\n <!-- <svg [ngClass]=\"sortColumName === 'approvalTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n 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 === 'approvalTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let taskinfo of TaskInfoData\">\r\n <!-- (click)=\"storeView(taskinfo)\" -->\r\n <td>\r\n <span \r\n class=\"table-title\">{{ taskinfo.storeName || '--' }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userEmail || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.scheduleEndTime_iso ?\r\n taskinfo.scheduleEndTime_iso.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-danger': taskinfo.checklistStatus === 'Open',\r\n 'badge-light-primary': taskinfo.checklistStatus === 'In Progress',\r\n 'badge-light-success': taskinfo.checklistStatus === 'Submitted'\r\n }\"> <span *ngIf=\"taskinfo.redoStatus\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7166_57025)\">\r\n <path \r\n d=\"M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507\"\r\n [attr.stroke]=\"getRedoSvgColor(taskinfo.checklistStatus)\"\r\n stroke-width=\"2\" \r\n stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7166_57025\">\r\n <rect width=\"12\" height=\"13\" fill=\"white\" transform=\"translate(0 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n {{ taskinfo.checklistStatus | titlecase }}\r\n </span>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.submitTime_string ?\r\n taskinfo.submitTime_string.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalByEmail || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Open' && taskinfo.checklistStatus !== 'In Progress'\"\r\n (click)=\"navigateToGallery(taskinfo)\" class=\"cursor-pointer table-title\">\r\n <span>\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Open' || taskinfo.checklistStatus === 'In Progress' && taskinfo.checklistStatus !== 'Submitted'\"\r\n class=\"table-title\">\r\n <span ngbTooltip=\"Required Submitted status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n \r\n \r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"taskinfoedit(taskinfo)\"\r\n class=\"cursor-pointer ms-6\">\r\n <span>\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"ms-6\">\r\n <span ngbTooltip=\"Required Open or In Progress status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"taskInfoLoading\">\r\n <div 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 </ng-container>\r\n <ng-container *ngIf=\"taskInfoNoData && !taskInfoLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Task Info</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!taskInfoLoading && !taskInfoNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.taskname{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\n"] }]
19444
+ args: [{ selector: 'lib-task-info', template: "<div class=\"col-lg-12 mt-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard/task']\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\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\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <lib-select [items]=\"taskDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedTask]\" (selected)=\"onTaskSelect($event)\">\r\n </lib-select>\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap\">\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedTask?.createdByName || '--' }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ totalItems || '--' }} {{selectedTask?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M13.0387 15.7501C12.2028 15.7501 11.4937 15.4591 10.9117 14.8771C10.3298 14.2941 10.0388 13.5851 10.0388 12.7501C10.0388 11.9151 10.3298 11.2061 10.9117 10.6231C11.4937 10.0411 12.2028 9.75005 13.0387 9.75005C13.8737 9.75005 14.5825 10.0411 15.165 10.6231C15.7475 11.2051 16.0388 11.9141 16.0387 12.7501C16.0387 13.5856 15.7475 14.2946 15.165 14.8771C14.5825 15.4596 13.8737 15.7506 13.0387 15.7501ZM13.3267 12.6263V10.8751C13.3267 10.7981 13.298 10.7306 13.2405 10.6726C13.1825 10.6151 13.115 10.5863 13.038 10.5863C12.9615 10.5863 12.8942 10.6153 12.8363 10.6733C12.7787 10.7308 12.75 10.7981 12.75 10.8751V12.6248C12.75 12.7013 12.764 12.7753 12.792 12.8468C12.82 12.9188 12.8665 12.9876 12.9315 13.0531L14.0753 14.1968C14.1313 14.2523 14.1973 14.2826 14.2733 14.2876C14.3492 14.2926 14.4198 14.2623 14.4847 14.1968C14.5503 14.1318 14.583 14.0636 14.583 13.9921C14.583 13.9206 14.5505 13.8523 14.4855 13.7873L13.3267 12.6263ZM4.21125 15.0001C3.87825 15.0001 3.59325 14.8813 3.35625 14.6438C3.11875 14.4068 3 14.1218 3 13.7888V4.2113C3 3.8783 3.11875 3.5933 3.35625 3.3563C3.59325 3.1188 3.87825 3.00005 4.21125 3.00005H7.689C7.759 2.70655 7.91475 2.46005 8.15625 2.26055C8.39775 2.06105 8.679 1.9613 9 1.9613C9.327 1.9613 9.6105 2.0613 9.8505 2.2613C10.0905 2.4603 10.2455 2.70655 10.3155 3.00005H13.788C14.1215 3.00005 14.4067 3.1188 14.6437 3.3563C14.8812 3.5933 15 3.8783 15 4.2113V8.7263C14.871 8.6598 14.749 8.60155 14.634 8.55155C14.519 8.50155 14.391 8.4568 14.25 8.4173V4.2113C14.25 4.0963 14.202 3.99055 14.106 3.89405C14.0095 3.79805 13.9038 3.75005 13.7887 3.75005H12V4.8173C12 4.9888 11.9425 5.1328 11.8275 5.2493C11.7125 5.3653 11.57 5.4233 11.4 5.4233H6.6C6.43 5.4233 6.2875 5.3653 6.1725 5.2493C6.0575 5.1328 6 4.9888 6 4.8173V3.75005H4.21125C4.09625 3.75005 3.9905 3.79805 3.894 3.89405C3.798 3.99055 3.75 4.0963 3.75 4.2113V13.7888C3.75 13.9233 3.79325 14.0338 3.87975 14.1203C3.96625 14.2068 4.07675 14.2501 4.21125 14.2501H8.8065C8.8465 14.3901 8.89375 14.5203 8.94825 14.6408C9.00325 14.7608 9.07325 14.8806 9.15825 15.0001H4.212H4.21125ZM9.00225 3.92255C9.17475 3.92255 9.3185 3.86455 9.4335 3.74855C9.5485 3.63155 9.606 3.48705 9.606 3.31505C9.606 3.14255 9.54775 2.9988 9.43125 2.8838C9.31425 2.7688 9.16975 2.7113 8.99775 2.7113C8.82525 2.7113 8.6815 2.7698 8.5665 2.8868C8.4515 3.0033 8.394 3.14755 8.394 3.31955C8.394 3.49205 8.4525 3.6358 8.5695 3.7508C8.686 3.8658 8.83025 3.92255 9.00225 3.92255Z\" fill=\"#667085\"/>\r\n </svg><span ngbTooltip=\"Due Date\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">{{ selectedTask?.scheduleEndTime_iso || \"--\" }}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <!-- *ngIf=\"refreshTaskDropdown\" -->\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\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 d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!TaskInfoData.length\">\r\n <!-- Export Icon -->\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!taskInfoLoading && !taskInfoNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Name\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">User Email\r\n <svg [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"showZoneData\" class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Type\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Due on</th>\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'submitTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Approved By</th>\r\n <!-- class=\"cursor-pointer\" (click)=\"sortData('approvalTime_string')\" -->\r\n <th >Approved On\r\n <!-- <svg [ngClass]=\"sortColumName === 'approvalTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n 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 === 'approvalTime_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> -->\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let taskinfo of TaskInfoData\">\r\n <!-- (click)=\"storeView(taskinfo)\" -->\r\n <td>\r\n <span \r\n class=\"table-title\">{{ taskinfo.storeName || '--' }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ taskinfo.userEmail || '--' }}\r\n </div>\r\n </td>\r\n <td *ngIf=\"showZoneData\">\r\n <div class=\"table-title\">\r\n {{ taskinfo.zoneName || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.scheduleEndTime_iso ?\r\n taskinfo.scheduleEndTime_iso.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-danger': taskinfo.checklistStatus === 'Open',\r\n 'badge-light-primary': taskinfo.checklistStatus === 'In Progress',\r\n 'badge-light-success': taskinfo.checklistStatus === 'Submitted'\r\n }\"> <span *ngIf=\"taskinfo.redoStatus\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7166_57025)\">\r\n <path \r\n d=\"M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507\"\r\n [attr.stroke]=\"getRedoSvgColor(taskinfo.checklistStatus)\"\r\n stroke-width=\"2\" \r\n stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7166_57025\">\r\n <rect width=\"12\" height=\"13\" fill=\"white\" transform=\"translate(0 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n {{ taskinfo.checklistStatus | titlecase }}\r\n </span>\r\n\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.submitTime_string ?\r\n taskinfo.submitTime_string.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalByEmail || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ taskinfo.approvalTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Open' && taskinfo.checklistStatus !== 'In Progress'\"\r\n (click)=\"navigateToGallery(taskinfo)\" class=\"cursor-pointer table-title\">\r\n <span>\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Open' || taskinfo.checklistStatus === 'In Progress' && taskinfo.checklistStatus !== 'Submitted'\"\r\n class=\"table-title\">\r\n <span ngbTooltip=\"Required Submitted status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n \r\n \r\n <a *ngIf=\"taskinfo.checklistStatus !== 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"taskinfoedit(taskinfo)\"\r\n class=\"cursor-pointer ms-6\">\r\n <span>\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a>\r\n <a *ngIf=\"taskinfo.checklistStatus === 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit\" class=\"ms-6\">\r\n <span ngbTooltip=\"Required Open or In Progress status\" placement=\"top\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\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 <g clip-path=\"url(#clip0_5271_17556)\">\r\n <path\r\n d=\"M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5271_17556\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span></a> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"taskInfoLoading\">\r\n <div 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 </ng-container>\r\n <ng-container *ngIf=\"taskInfoNoData && !taskInfoLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Task Info</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!taskInfoLoading && !taskInfoNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.taskname{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\n"] }]
19348
19445
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: TraxService }, { type: i2$2.PageInfoService }, { type: i2.NgbModal }, { type: i1.FormBuilder }] });
19349
19446
 
19350
19447
  dayjs.extend(utc$1);
@@ -19990,7 +20087,7 @@ const routes = [
19990
20087
  },
19991
20088
  {
19992
20089
  path: 'audit',
19993
- loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-B6bePYMW.mjs').then((m) => m.EyeTestAuditModule)
20090
+ loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-TjzMSq1X.mjs').then((m) => m.EyeTestAuditModule)
19994
20091
  }
19995
20092
  // {
19996
20093
  // path:'task',
@@ -20635,4 +20732,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
20635
20732
  */
20636
20733
 
20637
20734
  export { TraxService as T, TangoAnalyseTraxModule as a, TangoAnalyseTraxComponent as b };
20638
- //# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs.map
20735
+ //# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CVvZ9PNQ.mjs.map