tango-app-ui-analyse-trax 3.3.1-alpha-task.67 → 3.3.1-alpha-task.68
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/add-task/add-task.component.mjs +2 -2
- package/esm2022/lib/components/gallery/gallery.component.mjs +25 -17
- package/fesm2022/tango-app-ui-analyse-trax.mjs +25 -17
- package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
- 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/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
|
@@ -4975,7 +4975,7 @@ class AddTaskComponent {
|
|
|
4975
4975
|
"answers": response[0].questions[0].answers
|
|
4976
4976
|
}
|
|
4977
4977
|
],
|
|
4978
|
-
"scheduleDate": this.selectedDate.startDate,
|
|
4978
|
+
"scheduleDate": dayjs(this.selectedDate.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
|
|
4979
4979
|
"scheduleEndTime": time.format("hh:mm A"),
|
|
4980
4980
|
"userEmail": this.checklistInfo?.userEmail,
|
|
4981
4981
|
"userName": this.checklistInfo?.submittedBy,
|
|
@@ -5869,7 +5869,7 @@ class GalleryComponent {
|
|
|
5869
5869
|
};
|
|
5870
5870
|
this.getAllStores();
|
|
5871
5871
|
});
|
|
5872
|
-
|
|
5872
|
+
console.log("1111----->", this.queryParams);
|
|
5873
5873
|
this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
|
|
5874
5874
|
if (env) {
|
|
5875
5875
|
this.environment = env;
|
|
@@ -6544,7 +6544,7 @@ class GalleryComponent {
|
|
|
6544
6544
|
this.tempselectedSection = this.tempselectedSection.filter((ele) => ele.questions.length > 0);
|
|
6545
6545
|
}
|
|
6546
6546
|
this.selectedExport = this.tempselectedSection.length > 0;
|
|
6547
|
-
|
|
6547
|
+
console.log(this.tempselectedSection);
|
|
6548
6548
|
}
|
|
6549
6549
|
getmobileUsageDatalist(type) {
|
|
6550
6550
|
this.loading = true;
|
|
@@ -6718,13 +6718,13 @@ class GalleryComponent {
|
|
|
6718
6718
|
else if (this.questionscount(this.selectedSection) == 1) {
|
|
6719
6719
|
this.showsingle = true;
|
|
6720
6720
|
this.showmulti = false;
|
|
6721
|
-
|
|
6721
|
+
console.log(this.selectedSection);
|
|
6722
6722
|
}
|
|
6723
6723
|
this.offset = 1;
|
|
6724
6724
|
this.viewloading = true;
|
|
6725
6725
|
this.viewnoData = false;
|
|
6726
6726
|
let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
|
|
6727
|
-
|
|
6727
|
+
console.log(this.galleryForm.value.type);
|
|
6728
6728
|
if (this.galleryForm.value.type === 'checklist') {
|
|
6729
6729
|
let obj = {
|
|
6730
6730
|
"fromDate": this.galleryForm.value.fromDate,
|
|
@@ -6735,7 +6735,8 @@ class GalleryComponent {
|
|
|
6735
6735
|
"storeId": stores,
|
|
6736
6736
|
"answerType": this.galleryForm.value.answerType,
|
|
6737
6737
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6738
|
-
"viewRedo": this.galleryForm.value.viewRedo
|
|
6738
|
+
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6739
|
+
"filter": ""
|
|
6739
6740
|
};
|
|
6740
6741
|
this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6741
6742
|
next: (res) => {
|
|
@@ -6767,7 +6768,8 @@ class GalleryComponent {
|
|
|
6767
6768
|
"storeId": stores,
|
|
6768
6769
|
"answerType": this.galleryForm.value.answerType,
|
|
6769
6770
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6770
|
-
"viewRedo": this.galleryForm.value.viewRedo
|
|
6771
|
+
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6772
|
+
"filter": ""
|
|
6771
6773
|
};
|
|
6772
6774
|
this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6773
6775
|
next: (res) => {
|
|
@@ -6807,7 +6809,8 @@ class GalleryComponent {
|
|
|
6807
6809
|
"storeId": stores,
|
|
6808
6810
|
"answerType": this.galleryForm.value.answerType,
|
|
6809
6811
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6810
|
-
"viewRedo": this.galleryForm.value.viewRedo
|
|
6812
|
+
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6813
|
+
"filter": ""
|
|
6811
6814
|
};
|
|
6812
6815
|
this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6813
6816
|
next: (res) => {
|
|
@@ -6846,7 +6849,8 @@ class GalleryComponent {
|
|
|
6846
6849
|
"storeId": stores,
|
|
6847
6850
|
"answerType": this.galleryForm.value.answerType,
|
|
6848
6851
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6849
|
-
"viewRedo": this.galleryForm.value.viewRedo
|
|
6852
|
+
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6853
|
+
"filter": ""
|
|
6850
6854
|
};
|
|
6851
6855
|
this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6852
6856
|
next: (res) => {
|
|
@@ -6894,7 +6898,8 @@ class GalleryComponent {
|
|
|
6894
6898
|
"sourceCheckList_id": this.galleryForm.value.checkListId,
|
|
6895
6899
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6896
6900
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6897
|
-
"questions": this.selectedSection
|
|
6901
|
+
"questions": this.selectedSection,
|
|
6902
|
+
"filter": ""
|
|
6898
6903
|
};
|
|
6899
6904
|
this.traxService.getAnswers(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6900
6905
|
next: (res) => {
|
|
@@ -6939,7 +6944,8 @@ class GalleryComponent {
|
|
|
6939
6944
|
"sourceCheckList_id": this.galleryForm.value.checkListId,
|
|
6940
6945
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6941
6946
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6942
|
-
"questions": this.selectedSection
|
|
6947
|
+
"questions": this.selectedSection,
|
|
6948
|
+
"filter": ""
|
|
6943
6949
|
};
|
|
6944
6950
|
this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6945
6951
|
next: (res) => {
|
|
@@ -7126,7 +7132,7 @@ class GalleryComponent {
|
|
|
7126
7132
|
}
|
|
7127
7133
|
}
|
|
7128
7134
|
typeChange(event) {
|
|
7129
|
-
|
|
7135
|
+
console.log(event);
|
|
7130
7136
|
this.galleryForm.get('type')?.setValue(event);
|
|
7131
7137
|
if (event === 'task') {
|
|
7132
7138
|
this.getAllTasks(event);
|
|
@@ -7149,7 +7155,7 @@ class GalleryComponent {
|
|
|
7149
7155
|
next: (res) => {
|
|
7150
7156
|
if (res && res.code == 200) {
|
|
7151
7157
|
this.checklists = res.data.checklistData;
|
|
7152
|
-
|
|
7158
|
+
console.log(this.queryParams);
|
|
7153
7159
|
setTimeout(() => {
|
|
7154
7160
|
if (this.queryParams.checklistId && this.queryParams.checklistType == 'task') {
|
|
7155
7161
|
this.galleryForm.get('checkListId')?.setValue(this.queryParams.checklistId);
|
|
@@ -7165,7 +7171,7 @@ class GalleryComponent {
|
|
|
7165
7171
|
}
|
|
7166
7172
|
else {
|
|
7167
7173
|
this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName);
|
|
7168
|
-
this.galleryForm.get('
|
|
7174
|
+
this.galleryForm.get('checkListId')?.setValue(this.checklists[0]?.sourceCheckList_id);
|
|
7169
7175
|
}
|
|
7170
7176
|
this.gettaskQA(false);
|
|
7171
7177
|
}, 0);
|
|
@@ -7242,7 +7248,8 @@ class GalleryComponent {
|
|
|
7242
7248
|
"sourceCheckList_id": this.galleryForm.value.checkListId,
|
|
7243
7249
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
7244
7250
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
7245
|
-
"questions": this.selectedSection
|
|
7251
|
+
"questions": this.selectedSection,
|
|
7252
|
+
"filter": ""
|
|
7246
7253
|
};
|
|
7247
7254
|
this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
7248
7255
|
next: (res) => {
|
|
@@ -7261,6 +7268,7 @@ class GalleryComponent {
|
|
|
7261
7268
|
});
|
|
7262
7269
|
}
|
|
7263
7270
|
taskredirect(question, storeProfile, checklistInfo) {
|
|
7271
|
+
console.log(storeProfile);
|
|
7264
7272
|
this.router.navigate(['/manage/trax/gallery'], {
|
|
7265
7273
|
queryParams: {
|
|
7266
7274
|
ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
|
|
@@ -7301,11 +7309,11 @@ class GalleryComponent {
|
|
|
7301
7309
|
this.selectedTask = task;
|
|
7302
7310
|
}
|
|
7303
7311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i6.NgbModal }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i6$1.Location }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"gallery-card\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n </div> \r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n \r\n <!-- Actual Select Component -->\r\n <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <!-- {{storeList.length}}\r\n {{galleryForm.get('storeList')?.value.length}} -->\r\n <!-- Actual Select Component -->\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <span class=\"me-4 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n </span>\r\n <span class=\"me-3 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n </span>\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n <div class=\"card position-relative h-auto\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25 btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input\r\n class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n </section>\r\n \r\n </div>\r\n\r\n\r\n\r\n \r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n <div class=\"card position-relative h-100\">\r\n <div class=\"card-header border-0 px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n <h3></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item\" >\r\n <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n </a>\r\n </li> \r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n </div>\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n \r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n \r\n\r\n <div class=\"row px-10\" >\r\n\r\n <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-4 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br *ngIf=\"question.questionReferenceImage!==''\">\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n </div>\r\n <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div> \r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n \r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"></div>\r\n <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n \r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n <video controls class=\"recap-img p-3\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n \r\n </ul>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2 font-task\">Task</span>\r\n </button>\r\n <button *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\" class=\"btn btn-sm border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"ms-2 font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n Uniform Detection</div>\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n Mobile Usage Detection</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n \r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n </h3>\r\n \r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"my-0\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\"> \r\n </video> \r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n <div class=\"snapcard mx-8 my-8\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 \">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
|
|
7312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"gallery-card\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n </div> \r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n \r\n <!-- Actual Select Component -->\r\n <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <!-- {{storeList.length}}\r\n {{galleryForm.get('storeList')?.value.length}} -->\r\n <!-- Actual Select Component -->\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <span class=\"me-4 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n </span>\r\n <span class=\"me-3 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n </span>\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n <div class=\"card position-relative h-auto\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25 btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input\r\n class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n </section>\r\n \r\n </div>\r\n\r\n\r\n\r\n \r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n <div class=\"card position-relative h-100\">\r\n <div class=\"card-header border-0 px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n <h3></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item\" >\r\n <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n </a>\r\n </li> \r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n </div>\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n \r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n \r\n\r\n <div class=\"row px-10\" >\r\n\r\n <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-4 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br *ngIf=\"question.questionReferenceImage!==''\">\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n </div>\r\n <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div> \r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n \r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"></div>\r\n <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n \r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n <video controls class=\"recap-img p-3\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n \r\n </ul>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2 font-task\">Task</span>\r\n </button>\r\n <button *ngIf=\"question.task&&question.taskId&&this.galleryForm.value.type!='task'\" class=\"btn btn-sm btn-light-primary border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"ms-2 font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n Uniform Detection</div>\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n Mobile Usage Detection</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n \r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n </h3>\r\n \r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"my-0\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\"> \r\n </video> \r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n <div class=\"snapcard mx-8 my-8\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 \">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
|
|
7305
7313
|
}
|
|
7306
7314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
|
|
7307
7315
|
type: Component,
|
|
7308
|
-
args: [{ selector: 'lib-gallery', template: "<div class=\"gallery-card\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n </div> \r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n \r\n <!-- Actual Select Component -->\r\n <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <!-- {{storeList.length}}\r\n {{galleryForm.get('storeList')?.value.length}} -->\r\n <!-- Actual Select Component -->\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <span class=\"me-4 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n </span>\r\n <span class=\"me-3 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n </span>\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n <div class=\"card position-relative h-auto\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25 btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input\r\n class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n </section>\r\n \r\n </div>\r\n\r\n\r\n\r\n \r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n <div class=\"card position-relative h-100\">\r\n <div class=\"card-header border-0 px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n <h3></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item\" >\r\n <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n </a>\r\n </li> \r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n </div>\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n \r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n \r\n\r\n <div class=\"row px-10\" >\r\n\r\n <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-4 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br *ngIf=\"question.questionReferenceImage!==''\">\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n </div>\r\n <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div> \r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n \r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"></div>\r\n <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n \r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n <video controls class=\"recap-img p-3\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n \r\n </ul>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2 font-task\">Task</span>\r\n </button>\r\n <button *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\" class=\"btn btn-sm border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"ms-2 font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n Uniform Detection</div>\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n Mobile Usage Detection</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n \r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n </h3>\r\n \r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"my-0\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\"> \r\n </video> \r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n <div class=\"snapcard mx-8 my-8\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 \">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"] }]
|
|
7316
|
+
args: [{ selector: 'lib-gallery', template: "<div class=\"gallery-card\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n [ngModelOptions]=\"{standalone: true}\" (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n </div> \r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n \r\n <!-- Actual Select Component -->\r\n <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <div class=\"select-wrapper\">\r\n <!-- Placeholder Overlay -->\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <!-- {{storeList.length}}\r\n {{galleryForm.get('storeList')?.value.length}} -->\r\n <!-- Actual Select Component -->\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <span class=\"me-4 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n </span>\r\n <span class=\"me-3 mt-3\">\r\n \r\n \r\n <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n </span>\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n <div class=\"card position-relative h-auto\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25 btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\" > \r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input\r\n class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n </section>\r\n \r\n </div>\r\n\r\n\r\n\r\n \r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n <div class=\"card position-relative h-100\">\r\n <div class=\"card-header border-0 px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n <h3></h3>\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item\" >\r\n <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n </a>\r\n </li> \r\n <li class=\"nav-item\">\r\n <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n </div>\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n \r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n \r\n\r\n <div class=\"row px-10\" >\r\n\r\n <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n <div class=\"col-md-4 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br>\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br *ngIf=\"question.questionReferenceImage!==''\">\r\n <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n </div>\r\n <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div> \r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n \r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"></div>\r\n <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n \r\n <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n <video controls class=\"recap-img p-3\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <img class=\"img-logo\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <video controls class=\"recap-img p-3\" *ngIf=\"item.validationType=='Capture Video'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n </div>\r\n \r\n </ul>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2 font-task\">Task</span>\r\n </button>\r\n <button *ngIf=\"question.task&&question.taskId&&this.galleryForm.value.type!='task'\" class=\"btn btn-sm btn-light-primary border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n <span class=\"ms-2 font-task\">View Task</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n Uniform Detection</div>\r\n <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n Mobile Usage Detection</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div>\r\n <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <ul class=\"row w-100\">\r\n <li class=\"qa-heading\">\r\n \r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n </h3>\r\n \r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"my-0\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\"> \r\n </video> \r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n <div class=\"snapcard mx-8 my-8\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 \">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"] }]
|
|
7309
7317
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i6.NgbModal }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i6$1.Location }, { type: i2$1.PageInfoService }], propDecorators: { onClick: [{
|
|
7310
7318
|
type: HostListener,
|
|
7311
7319
|
args: ['document:click', ['$event']]
|