tango-app-ui-analyse-trax 3.7.21 → 3.7.22
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.
- package/esm2022/lib/components/gallery/gallery.component.mjs +12 -3
- package/fesm2022/tango-app-ui-analyse-trax.mjs +11 -2
- package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
- package/lib/components/add-checklist/add-checklist.component.d.ts +1 -1
- package/lib/components/eye-test-audit/eye-test/eye-test.component.d.ts +2 -2
- package/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.d.ts +2 -2
- package/lib/components/flags/flags.component.d.ts +2 -2
- package/lib/components/flags-info/flags-info.component.d.ts +3 -3
- package/lib/components/flags-new/flags-new.component.d.ts +2 -2
- package/lib/components/gallery/gallery.component.d.ts +2 -0
- package/lib/components/manage-task/manage-task.component.d.ts +1 -1
- package/lib/components/orders/orders.component.d.ts +1 -1
- package/lib/components/reports/reports.component.d.ts +2 -2
- package/lib/components/task-configure/task-configure.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -10509,6 +10509,7 @@ class GalleryComponent {
|
|
|
10509
10509
|
pageInfo;
|
|
10510
10510
|
sanitizer;
|
|
10511
10511
|
isFullscreen = false;
|
|
10512
|
+
fullscreenVideoElement = null;
|
|
10512
10513
|
dayjs = dayjs;
|
|
10513
10514
|
notifyCount = 0;
|
|
10514
10515
|
selectedDateRange = {};
|
|
@@ -13654,17 +13655,25 @@ class GalleryComponent {
|
|
|
13654
13655
|
const fsElement = document.fullscreenElement;
|
|
13655
13656
|
if (fsElement && fsElement?.tagName === 'VIDEO') {
|
|
13656
13657
|
this.isFullscreen = true;
|
|
13658
|
+
this.fullscreenVideoElement = fsElement;
|
|
13657
13659
|
}
|
|
13658
13660
|
else {
|
|
13659
13661
|
this.isFullscreen = false;
|
|
13662
|
+
this.fullscreenVideoElement = null;
|
|
13660
13663
|
}
|
|
13661
13664
|
}
|
|
13665
|
+
isVideoFullscreen(videoElement) {
|
|
13666
|
+
if (!videoElement || !this.isFullscreen || !this.fullscreenVideoElement) {
|
|
13667
|
+
return false;
|
|
13668
|
+
}
|
|
13669
|
+
return this.fullscreenVideoElement === videoElement;
|
|
13670
|
+
}
|
|
13662
13671
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i1.NgbModal }, { token: i1$3.ActivatedRoute }, { token: i1$3.Router }, { token: i3.ToastService }, { token: i6.Location }, { token: i2$1.PageInfoService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
13663
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)", "document:fullscreenchange": "onFullscreenChange()" } }, 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\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"select === 'cleaning' || select ==='scrum' || select ==='storeopenandclose'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <option value=\"Not Breached\">Not Breached</option>\r\n <option value=\"Offline\">Offline</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"galleryForm.get('checklistName')?.value === 'Store Half Shutter Detection'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <!-- <option value=\"Offline\">Offline</option> -->\r\n <option value=\"Files Not Received\">Files Not Received</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'outsidebusinesshoursqueuetracking'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Detected\">Detected</option>\r\n <option value=\"Not Detected\">Not Detected</option>\r\n <option value=\"Offline\">Offline</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 h-1000px scroll-y\">\r\n <!-- (select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') -->\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task' || headerFilters?.client === '452' || headerFilters?.client === '430' || headerFilters?.client === '11') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!allapprovalStatus\"></h3>\r\n\r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&allapprovalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\">({{selectedRecordCount}} Records\r\n Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !== 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" class=\"icon-btn\"\r\n (click)=\"createMultipleTask('task')\">\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=\"M11.6654 1.66797H4.9987C4.55667 1.66797 4.13275 1.84356 3.82019 2.15612C3.50763 2.46868 3.33203 2.89261 3.33203 3.33464V16.668C3.33203 17.11 3.50763 17.5339 3.82019 17.8465C4.13275 18.159 4.55667 18.3346 4.9987 18.3346H14.9987C15.4407 18.3346 15.8646 18.159 16.1772 17.8465C16.4898 17.5339 16.6654 17.11 16.6654 16.668V6.66797M11.6654 1.66797L16.6654 6.66797M11.6654 1.66797V6.66797H16.6654M9.9987 15.0013V10.0013M7.4987 12.5013H12.4987\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n <span class=\"btn-text\">Create Task</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"createMultipleTask('redo')\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19.1654 2.33527V7.33527M19.1654 7.33527H14.1654M19.1654 7.33527L15.2987 3.70193C14.4031 2.80586 13.2951 2.15127 12.078 1.79925C10.861 1.44722 9.57462 1.40923 8.33894 1.68882C7.10325 1.96841 5.95853 2.55646 5.01159 3.39812C4.06464 4.23977 3.34634 5.30759 2.9237 6.50193M0.832031 15.6686V10.6686M0.832031 10.6686H5.83203M0.832031 10.6686L4.6987 14.3019C5.59432 15.198 6.70234 15.8526 7.91937 16.2046C9.1364 16.5567 10.4228 16.5946 11.6585 16.3151C12.8941 16.0355 14.0389 15.4474 14.9858 14.6058C15.9328 13.7641 16.6511 12.6963 17.0737 11.5019\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"btn-text\">Redo</span>\r\n </span>\r\n </div>\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"exportDet($event)\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\" fill=\"black\"/>\r\n<path d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\" fill=\"black\"/>\r\n</svg>\r\n <span class=\"btn-text\">Export</span>\r\n </span>\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <div class=\"position-relative cursor-pointer me-10\" *ngIf=\"!galleryForm.value.viewRedo&&selectedUsers.length===0&&selectedStores.length===0\">\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id !== 'halfshutter'\" \r\n class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }}\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled\"\r\n 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PDF')\"\r\n class=\"cursor-pointer py-4 checkbox-label mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('CSV')\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PPT')\"\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=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('ZIP')\"\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 <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 <div class=\"row w-100 m-3\">\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n {{checklist?.storeProfile?.userName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n\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 <div class=\"col-md-6\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\">\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 </ng-template>\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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage !== '' && question.questionReferenceImage !== null)\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\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(1) }\">\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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType === 'yes/no'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer; let i = index\">\r\n\r\n <!-- \uD83D\uDFE9 LEFT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- CHECKLIST MULTI REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiQuestionReferenceImages(question); else singleChecklistRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let ref of question.multiQuestionReferenceImage; let ri = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(ref)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(question.multiQuestionReferenceImage),\r\n getRefImageNames(question.multiQuestionReferenceImage),\r\n ri\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + ref.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleChecklistRef>\r\n <div\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"title-ref my-3\"\r\n >\r\n Reference Image\r\n </div>\r\n <img\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- TASK REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.questionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let img of question.questionReferenceImage; let ti = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(img)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(\r\n getRefImageUrls(question.questionReferenceImage),\r\n getRefImageNames(question.questionReferenceImage),\r\n ti\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + img\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour' : ''\">\r\n {{ item.answer }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDFE6 RIGHT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- VALIDATION BLOCK -->\r\n <ng-container *ngIf=\"item.validation && item.validationAnswer !== ''\">\r\n <div class=\"title-ref my-3 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType === 'Capture Image' || item.validationType === 'Capture Video'\">\r\n <span>Validation Answer</span>\r\n <span *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched'\r\n : 'Not Matched'\r\n }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <!-- VALIDATION: IMAGE -->\r\n <img\r\n *ngIf=\"item.validationType === 'Capture Image'\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(\r\n item.runAIAnswer ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,\r\n 0\r\n )\"\r\n [src]=\"\r\n item.runAIAnswer\r\n ? environment.traxRunAiCDN + item.runAIAnswer\r\n : environment.TraxAnswerCDN + item.validationAnswer\r\n \"\r\n alt=\"Validation image\"\r\n />\r\n\r\n <!-- VALIDATION: VIDEO -->\r\n <div *ngIf=\"item.validationType === 'Capture Video'\" class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\"></video>\r\n </div>\r\n\r\n <!-- VALIDATION: TEXT -->\r\n <div *ngIf=\"item.validationType === 'Descriptive Answer'\" class=\"remarksTxt\">\r\n Validation Answer: {{ item.validationAnswer }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- ITEM REFERENCE IMAGES (inside validation) -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiReferenceImages(item); else singleItemRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(item.multiReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let reffItem of item.multiReferenceImage; let mi = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(reffItem)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(item.multiReferenceImage),\r\n getRefImageNames(item.multiReferenceImage),\r\n mi\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleItemRef>\r\n <div *ngIf=\"item.referenceImage\" class=\"title-ref my-3\">Reference Image</div>\r\n <img\r\n *ngIf=\"item.referenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + item.referenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"question.remarks\" class=\"remarksTxt\">\r\n Remarks : {{ question.remarks }}\r\n </div>\r\n\r\n <!-- AI DATA -->\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\" *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{ aiDataItem.lableName }} :</b>\r\n {{ aiDataItem.value?.toString()?.padStart(2, '0') }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'task'\">\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 <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=\"hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\">Reference\r\n Image</div>\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 <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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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\"></video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\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=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage !== null && item.referenceImage !=='' && galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\"> Reference\r\n Image </div>\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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(item?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(item?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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 <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image</div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image</div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6 row\" *ngIf=\"hasImageAnswer(question)\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent ; else noRunAIData\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <div class=\"mt-3\"\r\n *ngIf=\"question.userAnswer?.[0]?.runAIAnswer \">\r\n <span class=\"badge\"\r\n *ngIf=\"question.userAnswer?.[0]?.detectionStatus !== undefined\"\r\n [ngClass]=\"question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'\">\r\n {{question.userAnswer[0].detectionStatus\r\n ? 'Matched' : 'Not Matched'}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of question.userAnswer;let i = index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\r\n <!-- sanitizeUrl(environment.traxRunAiCDN + item.runAIAnswer) -->\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 <!-- <div class=\"remarksTxt\" *ngIf=\"question.runAI && question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b> {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div> -->\r\n <div\r\n *ngIf=\"question.userAnswer?.[0]?.runAIData?.length; else noRunAIData\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!question.userAnswer?.[0]?.runAIData?.length && question.userAnswer?.[0]?.employeeCount\">\r\n <div class=\"remarksTxt\"\r\n *ngIf=\"question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b>\r\n {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\"> Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image </div>\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 </ng-template>\r\n </div>\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=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\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 </div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"hasImageAnswer(question)\">\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), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\" class=\"collage-tile\">\r\n <img class=\"cursor-pointer\" (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n </div>\r\n </div> -->\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"multiImageCheckDetectionStatus(question.userAnswer).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"multiImageCheckDetectionStatus(question.userAnswer).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\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 </ng-template>\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 <div class=\"video-wrapper\" [ngClass]=\"{ 'fullscreen-active': isFullscreen }\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n </div>\r\n </ul>\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 <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 <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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> <h2>Checklist Name : {{this.checklistName}}</h2> </div> -->\r\n <div *ngIf=\"!['outsidebusinesshoursqueuetracking', 'halfshutter'].includes(galleryForm.value.sourceCheckList_id)\">\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>s\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\"> {{item.storeName}} </li> -->\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\"\r\n 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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}} </span>\r\n </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\r\n cars :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span>\r\n </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\"\r\n *ngIf=\"detection?.car_license_id\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Entry Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span>\r\n </span>\r\n </div>\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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span>\r\n </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 <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Slot :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!detection?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!detection?.Flag\">Not\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.Date|date:'dd-MM-yyyy'\r\n }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\"\r\n *ngIf=\"detection.path && detection.path !== null && detection.path !== undefined && detection.path !== ''\">\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 </div>\r\n <div\r\n *ngIf=\"galleryForm.value.sourceCheckList_id === 'outsidebusinesshoursqueuetracking'\">\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>\r\n <ul class=\"row\">\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==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span></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\"\r\n *ngIf=\"detection?.detectionStatus\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Detected'\">Detected</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Detected'\">Not\r\n Detected</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title text-end\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.Date}} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">:\r\n <span\r\n *ngFor=\"let detectionAt of detection.detections; let i=index\">\r\n <span class=\"ms-3 badge backgroundGray\"\r\n *ngIf=\"i < 5\">\r\n {{detectionAt}}\r\n </span>\r\n </span>\r\n <span *ngIf=\"detection.detections.length > 5\"\r\n class=\"ms-3 badge backgroundGray\">\r\n +{{ detection.detections.length - 5 }}\r\n </span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter'\">\r\n <div class=\" my-3 mt-5\">\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 <ul class=\"row\" *ngFor=\"let item of mobileusageData\">\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==='halfshutter'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-12\" *ngIf=\"detection?.storeName\">\r\n <h3 class=\"uni-title\">Store Name : <span class=\"ms-3\">{{detection.storeName}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.detectionTime\">\r\n <h3 class=\"uni-title\">Detection Time : <span class=\"ms-3\">{{detection.detectionTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.detectionStatus\">\r\n <h3 class=\"uni-title\">Detection Status :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"['Offline','Files Not Received'].includes(detection.detectionStatus)\">Files Not Received</span>\r\n </h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.configuredStoreTime\">\r\n <h3 class=\"uni-title\">Configured Store Time : \r\n <span class=\"ms-3 badge badge-num-muted\">{{detection.configuredStoreTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.downtime != null && detection?.downtime != undefined\">\r\n <h3 class=\"uni-title\">Downtime : <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></h3>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngIf=\"detection?.path\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\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\">: <span class=\"ms-3\">{{this.checklistName}}</span>\r\n </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\">: <span class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\"> </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\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatusCard\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <ng-template #noDetectionStatusCard>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n </ng-template>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\">:\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"detection?.Answer==='approved'\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:\r\n <span 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\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.date|date:'dd-MM-yyyy' }}\r\n </span></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 \">: <span\r\n class=\"ms-3\">{{detection.configTime }}</span></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\">: <span\r\n class=\"ms-3\">{{detection.duration }} Mins </span></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\">: <span\r\n class=\"ms-3\">{{detection.downTime }} Mins </span>\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </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 : <span\r\n class=\"ms-3\">{{detection.customer_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID : <span\r\n class=\"ms-3\">{{detection.queue_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID : <span\r\n class=\"ms-3\">{{detection.optum_id}}</span></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 : <span\r\n class=\"ms-3\">{{detection.temp_id}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend : <span\r\n class=\"ms-3\">{{detection.time_spend}}Mins</span></span>\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time : <span\r\n class=\"ms-3\">{{detection.entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.exit_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate : <span\r\n class=\"ms-3\">{{detection.adherence_rate}}</span></span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\"> <span\r\n class=\"ms-3\">{{detection.category}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n <span\r\n class=\"ms-3\">{{detection.customer_entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.customer_exit_time}}</span></span>\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 </div>\r\n\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=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.storeName\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item?.storeName\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\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\">: <span class=\"ms-3\">{{item.buffer_open }}\r\n mins</span></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\">: <span class=\"ms-3\">{{item.buffer_close }}\r\n mins</span></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\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!item?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"item?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Offline'\">Offline</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\">: <span\r\n class=\"ms-3\">{{item.date|date:'dd-MM-yyyy' }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <p class=\"uni-subtitle\">: <span class=\"ms-3\">{{item.downtime}} mins\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}} </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.onopenTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.lateopenTimeFlag\">Late Open</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.earlyopenTimeFlag\">Early Open</span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}}</div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.oncloseTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.earlycloseTimeFlag\">Early Close</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.latecloseTimeFlag\">Late Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *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 </div>\r\n\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 </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 </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 </div>\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:30px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}.bgDanger{color:var(--Error-700, #B42318);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Error-50, #FEF3F2)}.bgSuccess{color:var(--Success-700, #027A48);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Success-50, #ECFDF3)}.openclosesnapIMG{width:100%!important;height:205px!important;border-radius:30px!important}.backgroundGray{background:#f2f4f7!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;cursor:pointer;transition:all .7s ease;overflow:hidden}.icon-btn .btn-text{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:all .7s ease;color:#344054;font-size:14px}.icon-btn:hover .btn-text{max-width:120px;opacity:1;margin-left:6px}.video-wrapper{width:100%;height:450px;background:#000;display:flex;align-items:center;justify-content:center}.video-wrapper video{width:100%;height:100%;object-fit:contain;transition:all 20s ease}.video-wrapper.fullscreen-active{width:100vw!important;height:100vh!important;background:#000!important;overflow:hidden}.video-wrapper.fullscreen-active video{width:100vw!important;height:100vh!important;object-fit:contain!important;transform:none!important;background:#000!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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: i1.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$1, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent$1, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent$1, 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" }] });
|
|
13672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)", "document:fullscreenchange": "onFullscreenChange()" } }, 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\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"select === 'cleaning' || select ==='scrum' || select ==='storeopenandclose'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <option value=\"Not Breached\">Not Breached</option>\r\n <option value=\"Offline\">Offline</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"galleryForm.get('checklistName')?.value === 'Store Half Shutter Detection'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <!-- <option value=\"Offline\">Offline</option> -->\r\n <option value=\"Files Not Received\">Files Not Received</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'outsidebusinesshoursqueuetracking'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Detected\">Detected</option>\r\n <option value=\"Not Detected\">Not Detected</option>\r\n <option value=\"Offline\">Offline</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 h-1000px scroll-y\">\r\n <!-- (select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') -->\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task' || headerFilters?.client === '452' || headerFilters?.client === '430' || headerFilters?.client === '11') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!allapprovalStatus\"></h3>\r\n\r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&allapprovalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\">({{selectedRecordCount}} Records\r\n Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !== 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" class=\"icon-btn\"\r\n (click)=\"createMultipleTask('task')\">\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=\"M11.6654 1.66797H4.9987C4.55667 1.66797 4.13275 1.84356 3.82019 2.15612C3.50763 2.46868 3.33203 2.89261 3.33203 3.33464V16.668C3.33203 17.11 3.50763 17.5339 3.82019 17.8465C4.13275 18.159 4.55667 18.3346 4.9987 18.3346H14.9987C15.4407 18.3346 15.8646 18.159 16.1772 17.8465C16.4898 17.5339 16.6654 17.11 16.6654 16.668V6.66797M11.6654 1.66797L16.6654 6.66797M11.6654 1.66797V6.66797H16.6654M9.9987 15.0013V10.0013M7.4987 12.5013H12.4987\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n <span class=\"btn-text\">Create Task</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"createMultipleTask('redo')\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19.1654 2.33527V7.33527M19.1654 7.33527H14.1654M19.1654 7.33527L15.2987 3.70193C14.4031 2.80586 13.2951 2.15127 12.078 1.79925C10.861 1.44722 9.57462 1.40923 8.33894 1.68882C7.10325 1.96841 5.95853 2.55646 5.01159 3.39812C4.06464 4.23977 3.34634 5.30759 2.9237 6.50193M0.832031 15.6686V10.6686M0.832031 10.6686H5.83203M0.832031 10.6686L4.6987 14.3019C5.59432 15.198 6.70234 15.8526 7.91937 16.2046C9.1364 16.5567 10.4228 16.5946 11.6585 16.3151C12.8941 16.0355 14.0389 15.4474 14.9858 14.6058C15.9328 13.7641 16.6511 12.6963 17.0737 11.5019\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"btn-text\">Redo</span>\r\n </span>\r\n </div>\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"exportDet($event)\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\" fill=\"black\"/>\r\n<path d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\" fill=\"black\"/>\r\n</svg>\r\n <span class=\"btn-text\">Export</span>\r\n </span>\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <div class=\"position-relative cursor-pointer me-10\" *ngIf=\"!galleryForm.value.viewRedo&&selectedUsers.length===0&&selectedStores.length===0\">\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id !== 'halfshutter'\" \r\n class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }}\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled\"\r\n 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PDF')\"\r\n class=\"cursor-pointer py-4 checkbox-label mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('CSV')\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PPT')\"\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=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('ZIP')\"\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 <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 <div class=\"row w-100 m-3\">\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n {{checklist?.storeProfile?.userName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n\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 <div class=\"col-md-6\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\">\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 </ng-template>\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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage !== '' && question.questionReferenceImage !== null)\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\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(1) }\">\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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType === 'yes/no'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer; let i = index\">\r\n\r\n <!-- \uD83D\uDFE9 LEFT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- CHECKLIST MULTI REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiQuestionReferenceImages(question); else singleChecklistRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let ref of question.multiQuestionReferenceImage; let ri = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(ref)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(question.multiQuestionReferenceImage),\r\n getRefImageNames(question.multiQuestionReferenceImage),\r\n ri\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + ref.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleChecklistRef>\r\n <div\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"title-ref my-3\"\r\n >\r\n Reference Image\r\n </div>\r\n <img\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- TASK REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.questionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let img of question.questionReferenceImage; let ti = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(img)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(\r\n getRefImageUrls(question.questionReferenceImage),\r\n getRefImageNames(question.questionReferenceImage),\r\n ti\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + img\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour' : ''\">\r\n {{ item.answer }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDFE6 RIGHT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- VALIDATION BLOCK -->\r\n <ng-container *ngIf=\"item.validation && item.validationAnswer !== ''\">\r\n <div class=\"title-ref my-3 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType === 'Capture Image' || item.validationType === 'Capture Video'\">\r\n <span>Validation Answer</span>\r\n <span *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched'\r\n : 'Not Matched'\r\n }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <!-- VALIDATION: IMAGE -->\r\n <img\r\n *ngIf=\"item.validationType === 'Capture Image'\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(\r\n item.runAIAnswer ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,\r\n 0\r\n )\"\r\n [src]=\"\r\n item.runAIAnswer\r\n ? environment.traxRunAiCDN + item.runAIAnswer\r\n : environment.TraxAnswerCDN + item.validationAnswer\r\n \"\r\n alt=\"Validation image\"\r\n />\r\n\r\n <!-- VALIDATION: VIDEO -->\r\n <div *ngIf=\"item.validationType === 'Capture Video'\" class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\"></video>\r\n </div>\r\n\r\n <!-- VALIDATION: TEXT -->\r\n <div *ngIf=\"item.validationType === 'Descriptive Answer'\" class=\"remarksTxt\">\r\n Validation Answer: {{ item.validationAnswer }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- ITEM REFERENCE IMAGES (inside validation) -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiReferenceImages(item); else singleItemRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(item.multiReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let reffItem of item.multiReferenceImage; let mi = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(reffItem)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(item.multiReferenceImage),\r\n getRefImageNames(item.multiReferenceImage),\r\n mi\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleItemRef>\r\n <div *ngIf=\"item.referenceImage\" class=\"title-ref my-3\">Reference Image</div>\r\n <img\r\n *ngIf=\"item.referenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + item.referenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"question.remarks\" class=\"remarksTxt\">\r\n Remarks : {{ question.remarks }}\r\n </div>\r\n\r\n <!-- AI DATA -->\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\" *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{ aiDataItem.lableName }} :</b>\r\n {{ aiDataItem.value?.toString()?.padStart(2, '0') }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'task'\">\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 <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=\"hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\">Reference\r\n Image</div>\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 <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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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\"></video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\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=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage !== null && item.referenceImage !=='' && galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\"> Reference\r\n Image </div>\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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(item?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(item?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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 <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image</div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image</div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6 row\" *ngIf=\"hasImageAnswer(question)\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent ; else noRunAIData\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <div class=\"mt-3\"\r\n *ngIf=\"question.userAnswer?.[0]?.runAIAnswer \">\r\n <span class=\"badge\"\r\n *ngIf=\"question.userAnswer?.[0]?.detectionStatus !== undefined\"\r\n [ngClass]=\"question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'\">\r\n {{question.userAnswer[0].detectionStatus\r\n ? 'Matched' : 'Not Matched'}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of question.userAnswer;let i = index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\r\n <!-- sanitizeUrl(environment.traxRunAiCDN + item.runAIAnswer) -->\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 <!-- <div class=\"remarksTxt\" *ngIf=\"question.runAI && question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b> {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div> -->\r\n <div\r\n *ngIf=\"question.userAnswer?.[0]?.runAIData?.length; else noRunAIData\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!question.userAnswer?.[0]?.runAIData?.length && question.userAnswer?.[0]?.employeeCount\">\r\n <div class=\"remarksTxt\"\r\n *ngIf=\"question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b>\r\n {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\"> Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image </div>\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 </ng-template>\r\n </div>\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=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\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 </div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"hasImageAnswer(question)\">\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), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\" class=\"collage-tile\">\r\n <img class=\"cursor-pointer\" (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n </div>\r\n </div> -->\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"multiImageCheckDetectionStatus(question.userAnswer).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"multiImageCheckDetectionStatus(question.userAnswer).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\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 </ng-template>\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 <div class=\"video-wrapper\" [ngClass]=\"{ 'fullscreen-active': isVideoFullscreen(videoRef) }\">\r\n <video #videoRef controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n </div>\r\n </ul>\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 <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 <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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> <h2>Checklist Name : {{this.checklistName}}</h2> </div> -->\r\n <div *ngIf=\"!['outsidebusinesshoursqueuetracking', 'halfshutter'].includes(galleryForm.value.sourceCheckList_id)\">\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>s\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\"> {{item.storeName}} </li> -->\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\"\r\n 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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}} </span>\r\n </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\r\n cars :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span>\r\n </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\"\r\n *ngIf=\"detection?.car_license_id\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Entry Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span>\r\n </span>\r\n </div>\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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span>\r\n </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 <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Slot :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!detection?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!detection?.Flag\">Not\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.Date|date:'dd-MM-yyyy'\r\n }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\"\r\n *ngIf=\"detection.path && detection.path !== null && detection.path !== undefined && detection.path !== ''\">\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 </div>\r\n <div\r\n *ngIf=\"galleryForm.value.sourceCheckList_id === 'outsidebusinesshoursqueuetracking'\">\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>\r\n <ul class=\"row\">\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==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span></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\"\r\n *ngIf=\"detection?.detectionStatus\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Detected'\">Detected</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Detected'\">Not\r\n Detected</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title text-end\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.Date}} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">:\r\n <span\r\n *ngFor=\"let detectionAt of detection.detections; let i=index\">\r\n <span class=\"ms-3 badge backgroundGray\"\r\n *ngIf=\"i < 5\">\r\n {{detectionAt}}\r\n </span>\r\n </span>\r\n <span *ngIf=\"detection.detections.length > 5\"\r\n class=\"ms-3 badge backgroundGray\">\r\n +{{ detection.detections.length - 5 }}\r\n </span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter'\">\r\n <div class=\" my-3 mt-5\">\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 <ul class=\"row\" *ngFor=\"let item of mobileusageData\">\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==='halfshutter'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-12\" *ngIf=\"detection?.storeName\">\r\n <h3 class=\"uni-title\">Store Name : <span class=\"ms-3\">{{detection.storeName}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.detectionTime\">\r\n <h3 class=\"uni-title\">Detection Time : <span class=\"ms-3\">{{detection.detectionTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.detectionStatus\">\r\n <h3 class=\"uni-title\">Detection Status :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"['Offline','Files Not Received'].includes(detection.detectionStatus)\">Files Not Received</span>\r\n </h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.configuredStoreTime\">\r\n <h3 class=\"uni-title\">Configured Store Time : \r\n <span class=\"ms-3 badge badge-num-muted\">{{detection.configuredStoreTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.downtime != null && detection?.downtime != undefined\">\r\n <h3 class=\"uni-title\">Downtime : <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></h3>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngIf=\"detection?.path\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\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\">: <span class=\"ms-3\">{{this.checklistName}}</span>\r\n </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\">: <span class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\"> </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\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatusCard\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <ng-template #noDetectionStatusCard>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n </ng-template>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\">:\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"detection?.Answer==='approved'\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:\r\n <span 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\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.date|date:'dd-MM-yyyy' }}\r\n </span></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 \">: <span\r\n class=\"ms-3\">{{detection.configTime }}</span></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\">: <span\r\n class=\"ms-3\">{{detection.duration }} Mins </span></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\">: <span\r\n class=\"ms-3\">{{detection.downTime }} Mins </span>\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </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 : <span\r\n class=\"ms-3\">{{detection.customer_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID : <span\r\n class=\"ms-3\">{{detection.queue_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID : <span\r\n class=\"ms-3\">{{detection.optum_id}}</span></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 : <span\r\n class=\"ms-3\">{{detection.temp_id}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend : <span\r\n class=\"ms-3\">{{detection.time_spend}}Mins</span></span>\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time : <span\r\n class=\"ms-3\">{{detection.entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.exit_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate : <span\r\n class=\"ms-3\">{{detection.adherence_rate}}</span></span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\"> <span\r\n class=\"ms-3\">{{detection.category}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n <span\r\n class=\"ms-3\">{{detection.customer_entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.customer_exit_time}}</span></span>\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 </div>\r\n\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=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.storeName\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item?.storeName\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\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\">: <span class=\"ms-3\">{{item.buffer_open }}\r\n mins</span></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\">: <span class=\"ms-3\">{{item.buffer_close }}\r\n mins</span></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\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!item?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"item?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Offline'\">Offline</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\">: <span\r\n class=\"ms-3\">{{item.date|date:'dd-MM-yyyy' }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <p class=\"uni-subtitle\">: <span class=\"ms-3\">{{item.downtime}} mins\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}} </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.onopenTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.lateopenTimeFlag\">Late Open</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.earlyopenTimeFlag\">Early Open</span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}}</div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.oncloseTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.earlycloseTimeFlag\">Early Close</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.latecloseTimeFlag\">Late Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *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 </div>\r\n\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 </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 </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 </div>\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:30px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}.bgDanger{color:var(--Error-700, #B42318);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Error-50, #FEF3F2)}.bgSuccess{color:var(--Success-700, #027A48);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Success-50, #ECFDF3)}.openclosesnapIMG{width:100%!important;height:205px!important;border-radius:30px!important}.backgroundGray{background:#f2f4f7!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;cursor:pointer;transition:all .7s ease;overflow:hidden}.icon-btn .btn-text{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:all .7s ease;color:#344054;font-size:14px}.icon-btn:hover .btn-text{max-width:120px;opacity:1;margin-left:6px}.video-wrapper{width:100%;height:450px;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-wrapper video{width:100%;height:100%;object-fit:contain;transition:all 20s ease}.video-wrapper.fullscreen-active{width:100vw!important;height:100vh!important;background:#000!important;overflow:hidden}.video-wrapper.fullscreen-active video{width:100vw!important;height:100vh!important;object-fit:contain!important;transform:none!important;background:#000!important}.video-wrapper:not(.fullscreen-active){width:100%;height:450px}.video-wrapper:not(.fullscreen-active) video{width:100%;height:100%}\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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: i1.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$1, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent$1, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent$1, 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" }] });
|
|
13664
13673
|
}
|
|
13665
13674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
|
|
13666
13675
|
type: Component,
|
|
13667
|
-
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\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"select === 'cleaning' || select ==='scrum' || select ==='storeopenandclose'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <option value=\"Not Breached\">Not Breached</option>\r\n <option value=\"Offline\">Offline</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"galleryForm.get('checklistName')?.value === 'Store Half Shutter Detection'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <!-- <option value=\"Offline\">Offline</option> -->\r\n <option value=\"Files Not Received\">Files Not Received</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'outsidebusinesshoursqueuetracking'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Detected\">Detected</option>\r\n <option value=\"Not Detected\">Not Detected</option>\r\n <option value=\"Offline\">Offline</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 h-1000px scroll-y\">\r\n <!-- (select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') -->\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task' || headerFilters?.client === '452' || headerFilters?.client === '430' || headerFilters?.client === '11') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!allapprovalStatus\"></h3>\r\n\r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&allapprovalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\">({{selectedRecordCount}} Records\r\n Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !== 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" class=\"icon-btn\"\r\n (click)=\"createMultipleTask('task')\">\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=\"M11.6654 1.66797H4.9987C4.55667 1.66797 4.13275 1.84356 3.82019 2.15612C3.50763 2.46868 3.33203 2.89261 3.33203 3.33464V16.668C3.33203 17.11 3.50763 17.5339 3.82019 17.8465C4.13275 18.159 4.55667 18.3346 4.9987 18.3346H14.9987C15.4407 18.3346 15.8646 18.159 16.1772 17.8465C16.4898 17.5339 16.6654 17.11 16.6654 16.668V6.66797M11.6654 1.66797L16.6654 6.66797M11.6654 1.66797V6.66797H16.6654M9.9987 15.0013V10.0013M7.4987 12.5013H12.4987\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n <span class=\"btn-text\">Create Task</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"createMultipleTask('redo')\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19.1654 2.33527V7.33527M19.1654 7.33527H14.1654M19.1654 7.33527L15.2987 3.70193C14.4031 2.80586 13.2951 2.15127 12.078 1.79925C10.861 1.44722 9.57462 1.40923 8.33894 1.68882C7.10325 1.96841 5.95853 2.55646 5.01159 3.39812C4.06464 4.23977 3.34634 5.30759 2.9237 6.50193M0.832031 15.6686V10.6686M0.832031 10.6686H5.83203M0.832031 10.6686L4.6987 14.3019C5.59432 15.198 6.70234 15.8526 7.91937 16.2046C9.1364 16.5567 10.4228 16.5946 11.6585 16.3151C12.8941 16.0355 14.0389 15.4474 14.9858 14.6058C15.9328 13.7641 16.6511 12.6963 17.0737 11.5019\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"btn-text\">Redo</span>\r\n </span>\r\n </div>\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"exportDet($event)\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\" fill=\"black\"/>\r\n<path d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\" fill=\"black\"/>\r\n</svg>\r\n <span class=\"btn-text\">Export</span>\r\n </span>\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <div class=\"position-relative cursor-pointer me-10\" *ngIf=\"!galleryForm.value.viewRedo&&selectedUsers.length===0&&selectedStores.length===0\">\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id !== 'halfshutter'\" \r\n class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }}\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled\"\r\n 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PDF')\"\r\n class=\"cursor-pointer py-4 checkbox-label mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('CSV')\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PPT')\"\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=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('ZIP')\"\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 <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 <div class=\"row w-100 m-3\">\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n {{checklist?.storeProfile?.userName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n\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 <div class=\"col-md-6\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\">\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 </ng-template>\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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage !== '' && question.questionReferenceImage !== null)\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\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(1) }\">\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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType === 'yes/no'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer; let i = index\">\r\n\r\n <!-- \uD83D\uDFE9 LEFT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- CHECKLIST MULTI REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiQuestionReferenceImages(question); else singleChecklistRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let ref of question.multiQuestionReferenceImage; let ri = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(ref)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(question.multiQuestionReferenceImage),\r\n getRefImageNames(question.multiQuestionReferenceImage),\r\n ri\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + ref.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleChecklistRef>\r\n <div\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"title-ref my-3\"\r\n >\r\n Reference Image\r\n </div>\r\n <img\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- TASK REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.questionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let img of question.questionReferenceImage; let ti = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(img)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(\r\n getRefImageUrls(question.questionReferenceImage),\r\n getRefImageNames(question.questionReferenceImage),\r\n ti\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + img\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour' : ''\">\r\n {{ item.answer }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDFE6 RIGHT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- VALIDATION BLOCK -->\r\n <ng-container *ngIf=\"item.validation && item.validationAnswer !== ''\">\r\n <div class=\"title-ref my-3 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType === 'Capture Image' || item.validationType === 'Capture Video'\">\r\n <span>Validation Answer</span>\r\n <span *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched'\r\n : 'Not Matched'\r\n }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <!-- VALIDATION: IMAGE -->\r\n <img\r\n *ngIf=\"item.validationType === 'Capture Image'\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(\r\n item.runAIAnswer ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,\r\n 0\r\n )\"\r\n [src]=\"\r\n item.runAIAnswer\r\n ? environment.traxRunAiCDN + item.runAIAnswer\r\n : environment.TraxAnswerCDN + item.validationAnswer\r\n \"\r\n alt=\"Validation image\"\r\n />\r\n\r\n <!-- VALIDATION: VIDEO -->\r\n <div *ngIf=\"item.validationType === 'Capture Video'\" class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\"></video>\r\n </div>\r\n\r\n <!-- VALIDATION: TEXT -->\r\n <div *ngIf=\"item.validationType === 'Descriptive Answer'\" class=\"remarksTxt\">\r\n Validation Answer: {{ item.validationAnswer }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- ITEM REFERENCE IMAGES (inside validation) -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiReferenceImages(item); else singleItemRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(item.multiReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let reffItem of item.multiReferenceImage; let mi = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(reffItem)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(item.multiReferenceImage),\r\n getRefImageNames(item.multiReferenceImage),\r\n mi\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleItemRef>\r\n <div *ngIf=\"item.referenceImage\" class=\"title-ref my-3\">Reference Image</div>\r\n <img\r\n *ngIf=\"item.referenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + item.referenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"question.remarks\" class=\"remarksTxt\">\r\n Remarks : {{ question.remarks }}\r\n </div>\r\n\r\n <!-- AI DATA -->\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\" *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{ aiDataItem.lableName }} :</b>\r\n {{ aiDataItem.value?.toString()?.padStart(2, '0') }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'task'\">\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 <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=\"hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\">Reference\r\n Image</div>\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 <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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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\"></video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\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=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage !== null && item.referenceImage !=='' && galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\"> Reference\r\n Image </div>\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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(item?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(item?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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 <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image</div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image</div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6 row\" *ngIf=\"hasImageAnswer(question)\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent ; else noRunAIData\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <div class=\"mt-3\"\r\n *ngIf=\"question.userAnswer?.[0]?.runAIAnswer \">\r\n <span class=\"badge\"\r\n *ngIf=\"question.userAnswer?.[0]?.detectionStatus !== undefined\"\r\n [ngClass]=\"question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'\">\r\n {{question.userAnswer[0].detectionStatus\r\n ? 'Matched' : 'Not Matched'}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of question.userAnswer;let i = index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\r\n <!-- sanitizeUrl(environment.traxRunAiCDN + item.runAIAnswer) -->\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 <!-- <div class=\"remarksTxt\" *ngIf=\"question.runAI && question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b> {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div> -->\r\n <div\r\n *ngIf=\"question.userAnswer?.[0]?.runAIData?.length; else noRunAIData\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!question.userAnswer?.[0]?.runAIData?.length && question.userAnswer?.[0]?.employeeCount\">\r\n <div class=\"remarksTxt\"\r\n *ngIf=\"question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b>\r\n {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\"> Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image </div>\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 </ng-template>\r\n </div>\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=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\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 </div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"hasImageAnswer(question)\">\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), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\" class=\"collage-tile\">\r\n <img class=\"cursor-pointer\" (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n </div>\r\n </div> -->\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"multiImageCheckDetectionStatus(question.userAnswer).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"multiImageCheckDetectionStatus(question.userAnswer).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\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 </ng-template>\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 <div class=\"video-wrapper\" [ngClass]=\"{ 'fullscreen-active': isFullscreen }\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n </div>\r\n </ul>\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 <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 <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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> <h2>Checklist Name : {{this.checklistName}}</h2> </div> -->\r\n <div *ngIf=\"!['outsidebusinesshoursqueuetracking', 'halfshutter'].includes(galleryForm.value.sourceCheckList_id)\">\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>s\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\"> {{item.storeName}} </li> -->\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\"\r\n 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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}} </span>\r\n </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\r\n cars :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span>\r\n </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\"\r\n *ngIf=\"detection?.car_license_id\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Entry Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span>\r\n </span>\r\n </div>\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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span>\r\n </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 <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Slot :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!detection?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!detection?.Flag\">Not\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.Date|date:'dd-MM-yyyy'\r\n }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\"\r\n *ngIf=\"detection.path && detection.path !== null && detection.path !== undefined && detection.path !== ''\">\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 </div>\r\n <div\r\n *ngIf=\"galleryForm.value.sourceCheckList_id === 'outsidebusinesshoursqueuetracking'\">\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>\r\n <ul class=\"row\">\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==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span></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\"\r\n *ngIf=\"detection?.detectionStatus\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Detected'\">Detected</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Detected'\">Not\r\n Detected</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title text-end\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.Date}} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">:\r\n <span\r\n *ngFor=\"let detectionAt of detection.detections; let i=index\">\r\n <span class=\"ms-3 badge backgroundGray\"\r\n *ngIf=\"i < 5\">\r\n {{detectionAt}}\r\n </span>\r\n </span>\r\n <span *ngIf=\"detection.detections.length > 5\"\r\n class=\"ms-3 badge backgroundGray\">\r\n +{{ detection.detections.length - 5 }}\r\n </span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter'\">\r\n <div class=\" my-3 mt-5\">\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 <ul class=\"row\" *ngFor=\"let item of mobileusageData\">\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==='halfshutter'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-12\" *ngIf=\"detection?.storeName\">\r\n <h3 class=\"uni-title\">Store Name : <span class=\"ms-3\">{{detection.storeName}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.detectionTime\">\r\n <h3 class=\"uni-title\">Detection Time : <span class=\"ms-3\">{{detection.detectionTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.detectionStatus\">\r\n <h3 class=\"uni-title\">Detection Status :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"['Offline','Files Not Received'].includes(detection.detectionStatus)\">Files Not Received</span>\r\n </h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.configuredStoreTime\">\r\n <h3 class=\"uni-title\">Configured Store Time : \r\n <span class=\"ms-3 badge badge-num-muted\">{{detection.configuredStoreTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.downtime != null && detection?.downtime != undefined\">\r\n <h3 class=\"uni-title\">Downtime : <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></h3>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngIf=\"detection?.path\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\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\">: <span class=\"ms-3\">{{this.checklistName}}</span>\r\n </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\">: <span class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\"> </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\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatusCard\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <ng-template #noDetectionStatusCard>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n </ng-template>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\">:\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"detection?.Answer==='approved'\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:\r\n <span 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\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.date|date:'dd-MM-yyyy' }}\r\n </span></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 \">: <span\r\n class=\"ms-3\">{{detection.configTime }}</span></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\">: <span\r\n class=\"ms-3\">{{detection.duration }} Mins </span></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\">: <span\r\n class=\"ms-3\">{{detection.downTime }} Mins </span>\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </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 : <span\r\n class=\"ms-3\">{{detection.customer_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID : <span\r\n class=\"ms-3\">{{detection.queue_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID : <span\r\n class=\"ms-3\">{{detection.optum_id}}</span></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 : <span\r\n class=\"ms-3\">{{detection.temp_id}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend : <span\r\n class=\"ms-3\">{{detection.time_spend}}Mins</span></span>\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time : <span\r\n class=\"ms-3\">{{detection.entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.exit_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate : <span\r\n class=\"ms-3\">{{detection.adherence_rate}}</span></span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\"> <span\r\n class=\"ms-3\">{{detection.category}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n <span\r\n class=\"ms-3\">{{detection.customer_entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.customer_exit_time}}</span></span>\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 </div>\r\n\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=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.storeName\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item?.storeName\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\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\">: <span class=\"ms-3\">{{item.buffer_open }}\r\n mins</span></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\">: <span class=\"ms-3\">{{item.buffer_close }}\r\n mins</span></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\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!item?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"item?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Offline'\">Offline</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\">: <span\r\n class=\"ms-3\">{{item.date|date:'dd-MM-yyyy' }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <p class=\"uni-subtitle\">: <span class=\"ms-3\">{{item.downtime}} mins\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}} </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.onopenTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.lateopenTimeFlag\">Late Open</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.earlyopenTimeFlag\">Early Open</span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}}</div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.oncloseTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.earlycloseTimeFlag\">Early Close</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.latecloseTimeFlag\">Late Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *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 </div>\r\n\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 </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 </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 </div>\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:30px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}.bgDanger{color:var(--Error-700, #B42318);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Error-50, #FEF3F2)}.bgSuccess{color:var(--Success-700, #027A48);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Success-50, #ECFDF3)}.openclosesnapIMG{width:100%!important;height:205px!important;border-radius:30px!important}.backgroundGray{background:#f2f4f7!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;cursor:pointer;transition:all .7s ease;overflow:hidden}.icon-btn .btn-text{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:all .7s ease;color:#344054;font-size:14px}.icon-btn:hover .btn-text{max-width:120px;opacity:1;margin-left:6px}.video-wrapper{width:100%;height:450px;background:#000;display:flex;align-items:center;justify-content:center}.video-wrapper video{width:100%;height:100%;object-fit:contain;transition:all 20s ease}.video-wrapper.fullscreen-active{width:100vw!important;height:100vh!important;background:#000!important;overflow:hidden}.video-wrapper.fullscreen-active video{width:100vw!important;height:100vh!important;object-fit:contain!important;transform:none!important;background:#000!important}\n"] }]
|
|
13676
|
+
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\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"select === 'cleaning' || select ==='scrum' || select ==='storeopenandclose'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <option value=\"Not Breached\">Not Breached</option>\r\n <option value=\"Offline\">Offline</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\"\r\n *ngIf=\"galleryForm.get('checklistName')?.value === 'Store Half Shutter Detection'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Breached\">Breached</option>\r\n <!-- <option value=\"Offline\">Offline</option> -->\r\n <option value=\"Files Not Received\">Files Not Received</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'outsidebusinesshoursqueuetracking'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Detected\">Detected</option>\r\n <option value=\"Not Detected\">Not Detected</option>\r\n <option value=\"Offline\">Offline</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 h-1000px scroll-y\">\r\n <!-- (select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') -->\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task' || headerFilters?.client === '452' || headerFilters?.client === '430' || headerFilters?.client === '11') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'||!allapprovalStatus\"></h3>\r\n\r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&allapprovalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\">({{selectedRecordCount}} Records\r\n Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !== 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" class=\"icon-btn\"\r\n (click)=\"createMultipleTask('task')\">\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=\"M11.6654 1.66797H4.9987C4.55667 1.66797 4.13275 1.84356 3.82019 2.15612C3.50763 2.46868 3.33203 2.89261 3.33203 3.33464V16.668C3.33203 17.11 3.50763 17.5339 3.82019 17.8465C4.13275 18.159 4.55667 18.3346 4.9987 18.3346H14.9987C15.4407 18.3346 15.8646 18.159 16.1772 17.8465C16.4898 17.5339 16.6654 17.11 16.6654 16.668V6.66797M11.6654 1.66797L16.6654 6.66797M11.6654 1.66797V6.66797H16.6654M9.9987 15.0013V10.0013M7.4987 12.5013H12.4987\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n <span class=\"btn-text\">Create Task</span>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"createMultipleTask('redo')\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19.1654 2.33527V7.33527M19.1654 7.33527H14.1654M19.1654 7.33527L15.2987 3.70193C14.4031 2.80586 13.2951 2.15127 12.078 1.79925C10.861 1.44722 9.57462 1.40923 8.33894 1.68882C7.10325 1.96841 5.95853 2.55646 5.01159 3.39812C4.06464 4.23977 3.34634 5.30759 2.9237 6.50193M0.832031 15.6686V10.6686M0.832031 10.6686H5.83203M0.832031 10.6686L4.6987 14.3019C5.59432 15.198 6.70234 15.8526 7.91937 16.2046C9.1364 16.5567 10.4228 16.5946 11.6585 16.3151C12.8941 16.0355 14.0389 15.4474 14.9858 14.6058C15.9328 13.7641 16.6511 12.6963 17.0737 11.5019\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"btn-text\">Redo</span>\r\n </span>\r\n </div>\r\n <div class=\"me-4\"\r\n *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\"\r\n (click)=\"exportDet($event)\" class=\"icon-btn\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z\" fill=\"black\"/>\r\n<path d=\"M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z\" fill=\"black\"/>\r\n</svg>\r\n <span class=\"btn-text\">Export</span>\r\n </span>\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <div class=\"position-relative cursor-pointer me-10\" *ngIf=\"!galleryForm.value.viewRedo&&selectedUsers.length===0&&selectedStores.length===0\">\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id !== 'halfshutter'\" \r\n class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }}\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled\"\r\n 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" 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) && galleryForm.value.sourceCheckList_id !== 'halfshutter'\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->\r\n <li *ngIf=\"selectedSection.length >0\"\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 <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PDF')\"\r\n class=\"cursor-pointer py-4 checkbox-label mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('CSV')\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('PPT')\"\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=\"galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('ZIP')\"\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 <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 <div class=\"row w-100 m-3\">\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-3 text-title\"\r\n *ngIf=\"showsingle&&galleryForm.get('filtertype')?.value ==='Teams'\">\r\n {{checklist?.storeProfile?.userName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n\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 <div class=\"col-md-6\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\">\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 </ng-template>\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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage !== '' && question.questionReferenceImage !== null)\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\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(1) }\">\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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <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=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\r\n </div>\r\n <div class=\"col-md-6\">\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 <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType === 'yes/no'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer; let i = index\">\r\n\r\n <!-- \uD83D\uDFE9 LEFT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- CHECKLIST MULTI REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiQuestionReferenceImages(question); else singleChecklistRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let ref of question.multiQuestionReferenceImage; let ri = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(ref)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(question.multiQuestionReferenceImage),\r\n getRefImageNames(question.multiQuestionReferenceImage),\r\n ri\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + ref.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleChecklistRef>\r\n <div\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"title-ref my-3\"\r\n >\r\n Reference Image\r\n </div>\r\n <img\r\n *ngIf=\"question.questionReferenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- TASK REFERENCE IMAGES -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(question.questionReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let img of question.questionReferenceImage; let ti = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(img)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(\r\n getRefImageUrls(question.questionReferenceImage),\r\n getRefImageNames(question.questionReferenceImage),\r\n ti\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + img\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour' : ''\">\r\n {{ item.answer }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDFE6 RIGHT COLUMN -->\r\n <div class=\"col-md-6\">\r\n\r\n <!-- VALIDATION BLOCK -->\r\n <ng-container *ngIf=\"item.validation && item.validationAnswer !== ''\">\r\n <div class=\"title-ref my-3 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType === 'Capture Image' || item.validationType === 'Capture Video'\">\r\n <span>Validation Answer</span>\r\n <span *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched'\r\n : 'Not Matched'\r\n }}\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <!-- VALIDATION: IMAGE -->\r\n <img\r\n *ngIf=\"item.validationType === 'Capture Image'\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(\r\n item.runAIAnswer ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,\r\n 0\r\n )\"\r\n [src]=\"\r\n item.runAIAnswer\r\n ? environment.traxRunAiCDN + item.runAIAnswer\r\n : environment.TraxAnswerCDN + item.validationAnswer\r\n \"\r\n alt=\"Validation image\"\r\n />\r\n\r\n <!-- VALIDATION: VIDEO -->\r\n <div *ngIf=\"item.validationType === 'Capture Video'\" class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\" [src]=\"environment.TraxAnswerCDN + item.validationAnswer\"></video>\r\n </div>\r\n\r\n <!-- VALIDATION: TEXT -->\r\n <div *ngIf=\"item.validationType === 'Descriptive Answer'\" class=\"remarksTxt\">\r\n Validation Answer: {{ item.validationAnswer }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- ITEM REFERENCE IMAGES (inside validation) -->\r\n <ng-container *ngIf=\"galleryForm.value.type === 'checklist'\">\r\n <ng-container *ngIf=\"hasMultiReferenceImages(item); else singleItemRef\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div\r\n class=\"collage-grid\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns': getGridColumns(item.multiReferenceImage.length)\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let reffItem of item.multiReferenceImage; let mi = index\">\r\n <div class=\"collage-tile\" *ngIf=\"isValidImage(reffItem)\">\r\n <img\r\n class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(\r\n getMultiRefImageUrls(item.multiReferenceImage),\r\n getRefImageNames(item.multiReferenceImage),\r\n mi\r\n )\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleItemRef>\r\n <div *ngIf=\"item.referenceImage\" class=\"title-ref my-3\">Reference Image</div>\r\n <img\r\n *ngIf=\"item.referenceImage\"\r\n class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage, 0)\"\r\n [src]=\"environment.TraxAnswerCDN + item.referenceImage\"\r\n alt=\"Reference image\"\r\n />\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"question.remarks\" class=\"remarksTxt\">\r\n Remarks : {{ question.remarks }}\r\n </div>\r\n\r\n <!-- AI DATA -->\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\" *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{ aiDataItem.lableName }} :</b>\r\n {{ aiDataItem.value?.toString()?.padStart(2, '0') }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'task'\">\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 <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=\"hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\">Reference\r\n Image</div>\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 <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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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\"></video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\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 </ng-template>\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=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage\">\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(item.multiReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let reffItem of item.multiReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(reffItem)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + reffItem.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"item.referenceImage !== null && item.referenceImage !=='' && galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image\r\n </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 </ng-template>\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)\"> Reference\r\n Image </div>\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 d-flex justify-content-between\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n <span>Validation Answer </span>\r\n <span\r\n *ngIf=\"checkDetectionStatus(item?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(item?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </span>\r\n </div>\r\n <!-- <img class=\"img-logo cursor-pointer\" (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\" *ngIf=\"item.validationType==='Capture Image'\" src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\" alt=\"\"> -->\r\n <span>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer\"\r\n alt=\"\" />\r\n </span>\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 <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">\r\n Validation Answer : {{item.validationAnswer}}\r\n </span>\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image</div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image</div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6 row\" *ngIf=\"hasImageAnswer(question)\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent ; else noRunAIData\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <div class=\"mt-3\"\r\n *ngIf=\"question.userAnswer?.[0]?.runAIAnswer \">\r\n <span class=\"badge\"\r\n *ngIf=\"question.userAnswer?.[0]?.detectionStatus !== undefined\"\r\n [ngClass]=\"question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'\">\r\n {{question.userAnswer[0].detectionStatus\r\n ? 'Matched' : 'Not Matched'}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of question.userAnswer;let i = index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\r\n <!-- sanitizeUrl(environment.traxRunAiCDN + item.runAIAnswer) -->\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 <!-- <div class=\"remarksTxt\" *ngIf=\"question.runAI && question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b> {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div> -->\r\n <div\r\n *ngIf=\"question.userAnswer?.[0]?.runAIData?.length; else noRunAIData\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-template #noRunAIData>\r\n <div\r\n *ngIf=\"!question.userAnswer?.[0]?.runAIData?.length && question.userAnswer?.[0]?.employeeCount\">\r\n <div class=\"remarksTxt\"\r\n *ngIf=\"question.userAnswer?.[0]?.employeeCount\">\r\n <b>Employee Count :</b>\r\n {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\"> Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image </div>\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 </ng-template>\r\n </div>\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=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">Reference Image\r\n </div>\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 class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n Reference Image </div>\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasImageMultiReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.multiReferenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.multiReferenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\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 </div>\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 </ng-template>\r\n </div>\r\n\r\n <div class=\"col-md-6\" *ngIf=\"hasImageAnswer(question)\">\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), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\" class=\"collage-tile\">\r\n <img class=\"cursor-pointer\" (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n </div>\r\n </div> -->\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"mt-3\"\r\n *ngIf=\"multiImageCheckDetectionStatus(question.userAnswer).keyPresent\">\r\n <span class=\"badge\"\r\n [ngClass]=\"multiImageCheckDetectionStatus(question.userAnswer).keyValue ? 'bgSuccess' : 'bgDanger'\">\r\n {{\r\n checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue\r\n ? 'Matched' : 'Not Matched' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length), '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 <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n [src]=\"(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer\"\r\n alt=\"\">\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 <div *ngIf=\"question.userAnswer?.[0]?.runAIData?.length\">\r\n <div class=\"remarksTxt\"\r\n *ngFor=\"let aiDataItem of question.userAnswer?.[0]?.runAIData\">\r\n <span\r\n *ngIf=\"aiDataItem?.lableName !== 'detectionStatus'\">\r\n <b>{{aiDataItem.lableName}} :</b>\r\n {{aiDataItem.value?.toString()?.padStart(2,'0')}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')\">\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage\">\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.multiQuestionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.multiQuestionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item.imageURL\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noMultiImage>\r\n <div\r\n *ngIf=\"galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\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 </ng-template>\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 <div class=\"video-wrapper\" [ngClass]=\"{ 'fullscreen-active': isVideoFullscreen(videoRef) }\">\r\n <video #videoRef controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n <!-- <span class=\"position-absolute top-0 end-0 m-3 cursor-pointer\"><svg (click)=\"downloadVideo(item.answer)\" title=\"Download Video\" id=\"download-icon\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-overlay\"><g filter=\"url(#filter0_d_3822_19479)\"><rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\"/><rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\"/><path 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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1\"/><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\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\"/></filter></defs></svg></span> -->\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n </div>\r\n </ul>\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 <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 <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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> <h2>Checklist Name : {{this.checklistName}}</h2> </div> -->\r\n <div *ngIf=\"!['outsidebusinesshoursqueuetracking', 'halfshutter'].includes(galleryForm.value.sourceCheckList_id)\">\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>s\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\"> {{item.storeName}} </li> -->\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\"\r\n 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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}} </span>\r\n </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\r\n cars :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span>\r\n </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\"\r\n *ngIf=\"detection?.car_license_id\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Entry Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Number Plate :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span>\r\n </span>\r\n </div>\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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span>\r\n </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 :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span>\r\n </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 <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span>\r\n </span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Slot :\r\n <span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!detection?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!detection?.Flag\">Not\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.Date|date:'dd-MM-yyyy'\r\n }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\"\r\n *ngIf=\"detection.path && detection.path !== null && detection.path !== undefined && detection.path !== ''\">\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 </div>\r\n <div\r\n *ngIf=\"galleryForm.value.sourceCheckList_id === 'outsidebusinesshoursqueuetracking'\">\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>\r\n <ul class=\"row\">\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==='outsidebusinesshoursqueuetracking'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.storeName\">\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\">: <span\r\n class=\"ms-3\">{{detection.storeName}}</span></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\"\r\n *ngIf=\"detection?.detectionStatus\"> :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Detected'\">Detected</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Detected'\">Not\r\n Detected</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title text-end\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.Date}} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection Count</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{detection.detections.length}}</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.detections\">\r\n <h3 class=\"uni-title\">Detection at</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">:\r\n <span\r\n *ngFor=\"let detectionAt of detection.detections; let i=index\">\r\n <span class=\"ms-3 badge backgroundGray\"\r\n *ngIf=\"i < 5\">\r\n {{detectionAt}}\r\n </span>\r\n </span>\r\n <span *ngIf=\"detection.detections.length > 5\"\r\n class=\"ms-3 badge backgroundGray\">\r\n +{{ detection.detections.length - 5 }}\r\n </span>\r\n </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\">: <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"galleryForm.value.sourceCheckList_id === 'halfshutter'\">\r\n <div class=\" my-3 mt-5\">\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 <ul class=\"row\" *ngFor=\"let item of mobileusageData\">\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==='halfshutter'\">\r\n <div class=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-12\" *ngIf=\"detection?.storeName\">\r\n <h3 class=\"uni-title\">Store Name : <span class=\"ms-3\">{{detection.storeName}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.detectionTime\">\r\n <h3 class=\"uni-title\">Detection Time : <span class=\"ms-3\">{{detection.detectionTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.detectionStatus\">\r\n <h3 class=\"uni-title\">Detection Status :\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"['Offline','Files Not Received'].includes(detection.detectionStatus)\">Files Not Received</span>\r\n </h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection.configuredStoreTime\">\r\n <h3 class=\"uni-title\">Configured Store Time : \r\n <span class=\"ms-3 badge badge-num-muted\">{{detection.configuredStoreTime}}</span></h3>\r\n </div>\r\n <div class=\"col-md-12\" *ngIf=\"detection?.downtime != null && detection?.downtime != undefined\">\r\n <h3 class=\"uni-title\">Downtime : <span\r\n class=\"ms-3\">{{detection.downtime}} mins\r\n <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"15\" height=\"16\"\r\n 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\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span></h3>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngIf=\"detection?.path\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\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\">: <span class=\"ms-3\">{{this.checklistName}}</span>\r\n </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\">: <span class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\"> </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\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatusCard\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <ng-template #noDetectionStatusCard>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n </ng-template>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"detection?.detectionStatus; else noDetectionStatus\">\r\n <p class=\"uni-subtitle\">:\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"detection?.Answer==='approved'\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.detectionStatus === 'Offline'\">Offline</span>\r\n </p>\r\n </div>\r\n <ng-template #noDetectionStatus>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:\r\n <span 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\r\n Breached</span>\r\n </p>\r\n </div>\r\n </ng-template>\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\">: <span\r\n class=\"ms-3\">{{detection.date|date:'dd-MM-yyyy' }}\r\n </span></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 \">: <span\r\n class=\"ms-3\">{{detection.configTime }}</span></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\">: <span\r\n class=\"ms-3\">{{detection.duration }} Mins </span></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\">: <span\r\n class=\"ms-3\">{{detection.downTime }} Mins </span>\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </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 : <span\r\n class=\"ms-3\">{{detection.customer_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID : <span\r\n class=\"ms-3\">{{detection.queue_id}}</span></span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID : <span\r\n class=\"ms-3\">{{detection.optum_id}}</span></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 : <span\r\n class=\"ms-3\">{{detection.temp_id}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend : <span\r\n class=\"ms-3\">{{detection.time_spend}}Mins</span></span>\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time : <span\r\n class=\"ms-3\">{{detection.entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.exit_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate : <span\r\n class=\"ms-3\">{{detection.adherence_rate}}</span></span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\"> <span\r\n class=\"ms-3\">{{detection.category}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n <span\r\n class=\"ms-3\">{{detection.customer_entry_time}}</span></span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time : <span\r\n class=\"ms-3\">{{detection.customer_exit_time}}</span></span>\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 </div>\r\n\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=\"snapcard\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.storeName\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item?.storeName\">\r\n <p class=\"uni-subtitle\">: <span\r\n class=\"ms-3\">{{item.storeName}}</span></p>\r\n </div>\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\">: <span class=\"ms-3\">{{item.buffer_open }}\r\n mins</span></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\">: <span class=\"ms-3\">{{item.buffer_close }}\r\n mins</span></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\"> :\r\n <!-- <span class=\"ms-3 badge badge-light-danger\" *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\" *ngIf=\"!item?.Flag\">Not Breached</span> -->\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Breached'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"item?.detectionStatus === 'Not Breached'\">Not\r\n Breached</span>\r\n <span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.detectionStatus === 'Offline'\">Offline</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\">: <span\r\n class=\"ms-3\">{{item.date|date:'dd-MM-yyyy' }} </span></p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.downtime\">\r\n <p class=\"uni-subtitle\">: <span class=\"ms-3\">{{item.downtime}} mins\r\n <span ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\">\r\n <svg 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>\r\n </span>\r\n </span></p>\r\n </div>\r\n </div>\r\n\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}} </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.onopenTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.lateopenTimeFlag\">Late Open</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.earlyopenTimeFlag\">Early Open</span>\r\n </div>\r\n </div>\r\n </div>\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 <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 </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 is\r\n 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 openclosesnapIMG\"\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}}</div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"item?.oncloseTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.earlycloseTimeFlag\">Early Close</span>\r\n <span class=\"badge badge-light-warning snapbadge\"\r\n *ngIf=\"item?.latecloseTimeFlag\">Late Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *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 </div>\r\n\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 </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 </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 </div>\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:30px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}.bgDanger{color:var(--Error-700, #B42318);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Error-50, #FEF3F2)}.bgSuccess{color:var(--Success-700, #027A48);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px;border-radius:16px;background:var(--Success-50, #ECFDF3)}.openclosesnapIMG{width:100%!important;height:205px!important;border-radius:30px!important}.backgroundGray{background:#f2f4f7!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;cursor:pointer;transition:all .7s ease;overflow:hidden}.icon-btn .btn-text{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:all .7s ease;color:#344054;font-size:14px}.icon-btn:hover .btn-text{max-width:120px;opacity:1;margin-left:6px}.video-wrapper{width:100%;height:450px;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-wrapper video{width:100%;height:100%;object-fit:contain;transition:all 20s ease}.video-wrapper.fullscreen-active{width:100vw!important;height:100vh!important;background:#000!important;overflow:hidden}.video-wrapper.fullscreen-active video{width:100vw!important;height:100vh!important;object-fit:contain!important;transform:none!important;background:#000!important}.video-wrapper:not(.fullscreen-active){width:100%;height:450px}.video-wrapper:not(.fullscreen-active) video{width:100%;height:100%}\n"] }]
|
|
13668
13677
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i1.NgbModal }, { type: i1$3.ActivatedRoute }, { type: i1$3.Router }, { type: i3.ToastService }, { type: i6.Location }, { type: i2$1.PageInfoService }, { type: i2.DomSanitizer }], propDecorators: { onClick: [{
|
|
13669
13678
|
type: HostListener,
|
|
13670
13679
|
args: ['document:click', ['$event']]
|