tango-app-ui-analyse-trax 3.3.1-alpha-task.69 → 3.3.1-alpha-task.70
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/create-task/create-task.component.mjs +26 -15
- package/esm2022/lib/components/gallery/gallery.component.mjs +83 -28
- package/esm2022/lib/components/task/task.component.mjs +1 -2
- package/esm2022/lib/components/task-configure/task-configure.component.mjs +2 -2
- package/esm2022/lib/services/trax.service.mjs +2 -2
- package/fesm2022/tango-app-ui-analyse-trax.mjs +108 -43
- package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
- package/lib/components/gallery/gallery.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -163,7 +163,7 @@ class TraxService {
|
|
|
163
163
|
return this.http.post(`${this.traxTaskUrl}/getAnswers`, data);
|
|
164
164
|
}
|
|
165
165
|
getAnswercount(data) {
|
|
166
|
-
return this.http.post(`${this.traxTaskUrl}/
|
|
166
|
+
return this.http.post(`${this.traxTaskUrl}/getAnswerCount`, data);
|
|
167
167
|
}
|
|
168
168
|
getMobUsagelist(data) {
|
|
169
169
|
return this.http.post(`${this.galleryApiUrl}/getMobileUseagelist`, data);
|
|
@@ -5854,6 +5854,7 @@ class GalleryComponent {
|
|
|
5854
5854
|
showfilter = false;
|
|
5855
5855
|
previewType = 'image';
|
|
5856
5856
|
checkListDescription = '';
|
|
5857
|
+
answerFilter = [];
|
|
5857
5858
|
constructor(fb, gs, traxService, cd, modalService, route, router, toastService, location, pageInfo) {
|
|
5858
5859
|
this.fb = fb;
|
|
5859
5860
|
this.gs = gs;
|
|
@@ -5869,13 +5870,14 @@ class GalleryComponent {
|
|
|
5869
5870
|
?.pipe(takeUntil(this.destroy$))
|
|
5870
5871
|
.subscribe((params) => {
|
|
5871
5872
|
this.queryParams = params;
|
|
5872
|
-
this.
|
|
5873
|
-
|
|
5874
|
-
|
|
5875
|
-
|
|
5876
|
-
|
|
5873
|
+
if (this.queryParams && this.queryParams.ChecklistDate) {
|
|
5874
|
+
this.selectedDateRange = {
|
|
5875
|
+
startDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
|
|
5876
|
+
endDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
|
|
5877
|
+
};
|
|
5878
|
+
this.getAllStores();
|
|
5879
|
+
}
|
|
5877
5880
|
});
|
|
5878
|
-
console.log("1111----->", this.queryParams);
|
|
5879
5881
|
this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
|
|
5880
5882
|
if (env) {
|
|
5881
5883
|
this.environment = env;
|
|
@@ -5899,7 +5901,7 @@ class GalleryComponent {
|
|
|
5899
5901
|
}
|
|
5900
5902
|
else {
|
|
5901
5903
|
let userinfo = JSON.parse(localStorage.getItem("user-info") || "");
|
|
5902
|
-
if (userinfo) {
|
|
5904
|
+
if (userinfo && userinfo?.clientId) {
|
|
5903
5905
|
this.headerFilters.client = userinfo?.clientId;
|
|
5904
5906
|
this.clientDetails();
|
|
5905
5907
|
this.getAllGroups();
|
|
@@ -6017,7 +6019,8 @@ class GalleryComponent {
|
|
|
6017
6019
|
checkListType: "custom",
|
|
6018
6020
|
checkListId: "",
|
|
6019
6021
|
groupList: [this.groups],
|
|
6020
|
-
checkListDescription: ""
|
|
6022
|
+
checkListDescription: "",
|
|
6023
|
+
filter: ""
|
|
6021
6024
|
});
|
|
6022
6025
|
}
|
|
6023
6026
|
datechange(event) {
|
|
@@ -6550,7 +6553,7 @@ class GalleryComponent {
|
|
|
6550
6553
|
this.tempselectedSection = this.tempselectedSection.filter((ele) => ele.questions.length > 0);
|
|
6551
6554
|
}
|
|
6552
6555
|
this.selectedExport = this.tempselectedSection.length > 0;
|
|
6553
|
-
console.log(this.tempselectedSection)
|
|
6556
|
+
// console.log(this.tempselectedSection)
|
|
6554
6557
|
}
|
|
6555
6558
|
getmobileUsageDatalist(type) {
|
|
6556
6559
|
this.loading = true;
|
|
@@ -6715,6 +6718,29 @@ class GalleryComponent {
|
|
|
6715
6718
|
}
|
|
6716
6719
|
});
|
|
6717
6720
|
}
|
|
6721
|
+
getfilterCount() {
|
|
6722
|
+
let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
|
|
6723
|
+
let payload = {
|
|
6724
|
+
"fromDate": this.galleryForm.value.fromDate,
|
|
6725
|
+
"toDate": this.galleryForm.value.toDate,
|
|
6726
|
+
"storeId": stores,
|
|
6727
|
+
"answerType": this.selectedSection[0].answerType[0],
|
|
6728
|
+
"checklistId": this.galleryForm.value.checkListId,
|
|
6729
|
+
"ChecklistType": "custom",
|
|
6730
|
+
"questions": this.selectedSection[0].questions[0]
|
|
6731
|
+
};
|
|
6732
|
+
this.traxService.getAnswercount(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6733
|
+
next: (res) => {
|
|
6734
|
+
if (res && res.code === 200) {
|
|
6735
|
+
console.log(res.data);
|
|
6736
|
+
this.answerFilter = res.data.answersCount;
|
|
6737
|
+
}
|
|
6738
|
+
else {
|
|
6739
|
+
this.answerFilter = [];
|
|
6740
|
+
}
|
|
6741
|
+
}
|
|
6742
|
+
});
|
|
6743
|
+
}
|
|
6718
6744
|
selectsinglequestion() {
|
|
6719
6745
|
this.selectedSection = this.tempselectedSection;
|
|
6720
6746
|
if (this.questionscount(this.selectedSection) == 0 || this.questionscount(this.selectedSection) > 1) {
|
|
@@ -6724,13 +6750,20 @@ class GalleryComponent {
|
|
|
6724
6750
|
else if (this.questionscount(this.selectedSection) == 1) {
|
|
6725
6751
|
this.showsingle = true;
|
|
6726
6752
|
this.showmulti = false;
|
|
6727
|
-
console.log(this.selectedSection);
|
|
6753
|
+
console.log(this.selectedSection[0].answerType[0]);
|
|
6754
|
+
if (this.selectedSection[0].answerType[0] === "yes/no" || this.selectedSection[0].answerType[0] === "multiplechoicesingle" || this.selectedSection[0].answerType[0] === "multiplechoicemultiple") {
|
|
6755
|
+
this.showfilter = true;
|
|
6756
|
+
this.getfilterCount();
|
|
6757
|
+
}
|
|
6758
|
+
else {
|
|
6759
|
+
this.showfilter = false;
|
|
6760
|
+
}
|
|
6728
6761
|
}
|
|
6729
6762
|
this.offset = 1;
|
|
6730
6763
|
this.viewloading = true;
|
|
6731
6764
|
this.viewnoData = false;
|
|
6732
6765
|
let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
|
|
6733
|
-
console.log(this.galleryForm.value.type)
|
|
6766
|
+
// console.log(this.galleryForm.value.type)
|
|
6734
6767
|
if (this.galleryForm.value.type === 'checklist') {
|
|
6735
6768
|
let obj = {
|
|
6736
6769
|
"fromDate": this.galleryForm.value.fromDate,
|
|
@@ -6742,7 +6775,7 @@ class GalleryComponent {
|
|
|
6742
6775
|
"answerType": this.galleryForm.value.answerType,
|
|
6743
6776
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6744
6777
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6745
|
-
"filter":
|
|
6778
|
+
"filter": this.galleryForm.value.filter
|
|
6746
6779
|
};
|
|
6747
6780
|
this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6748
6781
|
next: (res) => {
|
|
@@ -6775,7 +6808,7 @@ class GalleryComponent {
|
|
|
6775
6808
|
"answerType": this.galleryForm.value.answerType,
|
|
6776
6809
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6777
6810
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6778
|
-
"filter":
|
|
6811
|
+
"filter": this.galleryForm.value.filter
|
|
6779
6812
|
};
|
|
6780
6813
|
this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6781
6814
|
next: (res) => {
|
|
@@ -6799,6 +6832,7 @@ class GalleryComponent {
|
|
|
6799
6832
|
}
|
|
6800
6833
|
}
|
|
6801
6834
|
getChecklistQA(type) {
|
|
6835
|
+
console.log("---->", this.galleryForm.value.checkListType);
|
|
6802
6836
|
this.selectedSection = [];
|
|
6803
6837
|
this.tempselectedSection = [];
|
|
6804
6838
|
this.loading = true;
|
|
@@ -6816,7 +6850,7 @@ class GalleryComponent {
|
|
|
6816
6850
|
"answerType": this.galleryForm.value.answerType,
|
|
6817
6851
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6818
6852
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6819
|
-
"filter":
|
|
6853
|
+
"filter": this.galleryForm.value.filter
|
|
6820
6854
|
};
|
|
6821
6855
|
this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6822
6856
|
next: (res) => {
|
|
@@ -6856,7 +6890,7 @@ class GalleryComponent {
|
|
|
6856
6890
|
"answerType": this.galleryForm.value.answerType,
|
|
6857
6891
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6858
6892
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6859
|
-
"filter":
|
|
6893
|
+
"filter": this.galleryForm.value.filter
|
|
6860
6894
|
};
|
|
6861
6895
|
this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6862
6896
|
next: (res) => {
|
|
@@ -6905,7 +6939,7 @@ class GalleryComponent {
|
|
|
6905
6939
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6906
6940
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6907
6941
|
"questions": this.selectedSection,
|
|
6908
|
-
"filter":
|
|
6942
|
+
"filter": this.galleryForm.value.filter
|
|
6909
6943
|
};
|
|
6910
6944
|
this.traxService.getAnswers(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6911
6945
|
next: (res) => {
|
|
@@ -6951,7 +6985,7 @@ class GalleryComponent {
|
|
|
6951
6985
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
6952
6986
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
6953
6987
|
"questions": this.selectedSection,
|
|
6954
|
-
"filter":
|
|
6988
|
+
"filter": this.galleryForm.value.filter
|
|
6955
6989
|
};
|
|
6956
6990
|
this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
6957
6991
|
next: (res) => {
|
|
@@ -7138,13 +7172,34 @@ class GalleryComponent {
|
|
|
7138
7172
|
}
|
|
7139
7173
|
}
|
|
7140
7174
|
typeChange(event) {
|
|
7141
|
-
console.log(event)
|
|
7175
|
+
// console.log(event)
|
|
7142
7176
|
this.galleryForm.get('type')?.setValue(event);
|
|
7143
7177
|
if (event === 'task') {
|
|
7144
|
-
this.
|
|
7178
|
+
this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
|
|
7179
|
+
next: (res) => {
|
|
7180
|
+
if (res && res.code == 200) {
|
|
7181
|
+
this.storeList = res.data.storesData;
|
|
7182
|
+
this.stores = res.data.storesData;
|
|
7183
|
+
this.galleryForm.get('storeList')?.setValue(this.storeList);
|
|
7184
|
+
this.getAllTasks(event);
|
|
7185
|
+
}
|
|
7186
|
+
}
|
|
7187
|
+
});
|
|
7145
7188
|
}
|
|
7146
7189
|
else {
|
|
7147
|
-
this.
|
|
7190
|
+
this.galleryForm.get('checkListType')?.setValue('custom');
|
|
7191
|
+
this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
|
|
7192
|
+
next: (res) => {
|
|
7193
|
+
if (res && res.code == 200) {
|
|
7194
|
+
this.storeList = res.data.storesData;
|
|
7195
|
+
this.stores = res.data.storesData;
|
|
7196
|
+
this.galleryForm.get('storeList')?.setValue(this.storeList);
|
|
7197
|
+
console.log(this.galleryForm.value);
|
|
7198
|
+
debugger;
|
|
7199
|
+
this.getAllCheckLists(event);
|
|
7200
|
+
}
|
|
7201
|
+
}
|
|
7202
|
+
});
|
|
7148
7203
|
}
|
|
7149
7204
|
}
|
|
7150
7205
|
getAllTasks(type) {
|
|
@@ -7161,7 +7216,7 @@ class GalleryComponent {
|
|
|
7161
7216
|
next: (res) => {
|
|
7162
7217
|
if (res && res.code == 200) {
|
|
7163
7218
|
this.checklists = res.data.checklistData;
|
|
7164
|
-
console.log(this.queryParams)
|
|
7219
|
+
// console.log(this.queryParams)
|
|
7165
7220
|
setTimeout(() => {
|
|
7166
7221
|
if (this.queryParams.checklistId && this.queryParams.checklistType == 'task') {
|
|
7167
7222
|
this.galleryForm.get('checkListId')?.setValue(this.queryParams.checklistId);
|
|
@@ -7255,7 +7310,7 @@ class GalleryComponent {
|
|
|
7255
7310
|
"viewFlag": this.galleryForm.value.viewFlag,
|
|
7256
7311
|
"viewRedo": this.galleryForm.value.viewRedo,
|
|
7257
7312
|
"questions": this.selectedSection,
|
|
7258
|
-
"filter":
|
|
7313
|
+
"filter": this.galleryForm.value.filter
|
|
7259
7314
|
};
|
|
7260
7315
|
this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
7261
7316
|
next: (res) => {
|
|
@@ -7274,7 +7329,6 @@ class GalleryComponent {
|
|
|
7274
7329
|
});
|
|
7275
7330
|
}
|
|
7276
7331
|
taskredirect(question, storeProfile, checklistInfo) {
|
|
7277
|
-
console.log(storeProfile);
|
|
7278
7332
|
this.router.navigate(['/manage/trax/gallery'], {
|
|
7279
7333
|
queryParams: {
|
|
7280
7334
|
ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
|
|
@@ -7310,16 +7364,17 @@ class GalleryComponent {
|
|
|
7310
7364
|
}
|
|
7311
7365
|
});
|
|
7312
7366
|
}
|
|
7313
|
-
selectedTask = 'yes';
|
|
7314
7367
|
taskTab(task) {
|
|
7315
|
-
this.
|
|
7368
|
+
this.galleryForm.get('filter')?.setValue(task);
|
|
7369
|
+
this.viewChecklists("all", "all");
|
|
7370
|
+
this.cd.detectChanges();
|
|
7316
7371
|
}
|
|
7317
7372
|
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 });
|
|
7318
|
-
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"] }] });
|
|
7373
|
+
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 po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\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'\" class=\"h-650px\">\r\n <div class=\"card position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" 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-650px scroll-y\">\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\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item.key)\" [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \" [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n <span class=\"view-detail\">\r\n View in detail \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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n \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)\"><span class=\"font-task\">View Task</span></button>\r\n\r\n <button class=\"btn btn-sm border-val1\" >\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_6402_17199)\">\r\n <path d=\"M18.3346 9.23355V10.0002C18.3336 11.7972 17.7517 13.5458 16.6757 14.9851C15.5998 16.4244 14.0874 17.4773 12.3641 17.9868C10.6408 18.4963 8.79902 18.4351 7.11336 17.8124C5.4277 17.1896 3.98851 16.0386 3.01044 14.5311C2.03236 13.0236 1.56779 11.2403 1.68603 9.44714C1.80427 7.65402 2.49897 5.94715 3.66654 4.58111C4.8341 3.21506 6.41196 2.26303 8.16479 1.867C9.91763 1.47097 11.7515 1.65216 13.393 2.38355M18.3346 3.33355L10.0013 11.6752L7.50131 9.17521\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6402_17199\">\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-task\">Approve</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<div class=\"row card mx-0 p-3 \">\r\n <div class=\"col-md-12 text-end\">\r\n<button class=\"btn btn-sm border-primary1\">Approve\r\n</button>\r\n</div>\r\n</div>\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}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}\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"] }] });
|
|
7319
7374
|
}
|
|
7320
7375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
|
|
7321
7376
|
type: Component,
|
|
7322
|
-
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"] }]
|
|
7377
|
+
args: [{ selector: 'lib-gallery', template: "<div class=\"gallery-card po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\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'\" class=\"h-650px\">\r\n <div class=\"card position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" 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-650px scroll-y\">\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\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item.key)\" [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \" [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n \r\n </ul>\r\n <span class=\"view-detail\">\r\n View in detail \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=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n \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)\"><span class=\"font-task\">View Task</span></button>\r\n\r\n <button class=\"btn btn-sm border-val1\" >\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_6402_17199)\">\r\n <path d=\"M18.3346 9.23355V10.0002C18.3336 11.7972 17.7517 13.5458 16.6757 14.9851C15.5998 16.4244 14.0874 17.4773 12.3641 17.9868C10.6408 18.4963 8.79902 18.4351 7.11336 17.8124C5.4277 17.1896 3.98851 16.0386 3.01044 14.5311C2.03236 13.0236 1.56779 11.2403 1.68603 9.44714C1.80427 7.65402 2.49897 5.94715 3.66654 4.58111C4.8341 3.21506 6.41196 2.26303 8.16479 1.867C9.91763 1.47097 11.7515 1.65216 13.393 2.38355M18.3346 3.33355L10.0013 11.6752L7.50131 9.17521\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6402_17199\">\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-task\">Approve</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<div class=\"row card mx-0 p-3 \">\r\n <div class=\"col-md-12 text-end\">\r\n<button class=\"btn btn-sm border-primary1\">Approve\r\n</button>\r\n</div>\r\n</div>\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}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}\n"] }]
|
|
7323
7378
|
}], 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: [{
|
|
7324
7379
|
type: HostListener,
|
|
7325
7380
|
args: ['document:click', ['$event']]
|
|
@@ -10383,17 +10438,6 @@ class CreateTaskComponent {
|
|
|
10383
10438
|
this.selectedQuestion = this.getQuestions(0).at(0);
|
|
10384
10439
|
}
|
|
10385
10440
|
});
|
|
10386
|
-
// this.gs.dataRangeValue
|
|
10387
|
-
// .pipe(takeUntil(this.destroy$))
|
|
10388
|
-
// .pipe(debounceTime(1000))
|
|
10389
|
-
// .subscribe((data: any) => {
|
|
10390
|
-
// if (data?.client) {
|
|
10391
|
-
// this.headerData = data;
|
|
10392
|
-
// if(this.currentTaskId){
|
|
10393
|
-
// this.getTask(this.currentTaskId)
|
|
10394
|
-
// }
|
|
10395
|
-
// }
|
|
10396
|
-
// })
|
|
10397
10441
|
}
|
|
10398
10442
|
ngOnDestroy() {
|
|
10399
10443
|
this.destroy$.next(true);
|
|
@@ -10440,6 +10484,7 @@ class CreateTaskComponent {
|
|
|
10440
10484
|
}
|
|
10441
10485
|
}
|
|
10442
10486
|
}
|
|
10487
|
+
console.log(this.taskForm.value.sections?.[0].questions);
|
|
10443
10488
|
}
|
|
10444
10489
|
addSectionForm(section) {
|
|
10445
10490
|
const sectionFormData = this.fb.group({
|
|
@@ -10544,9 +10589,29 @@ class CreateTaskComponent {
|
|
|
10544
10589
|
}
|
|
10545
10590
|
}
|
|
10546
10591
|
onQuestionClone(sectionIndex, questionIndex, question) {
|
|
10547
|
-
|
|
10548
|
-
|
|
10592
|
+
const cloneControl = (control) => {
|
|
10593
|
+
if (control instanceof FormGroup) {
|
|
10594
|
+
const clonedGroup = new FormGroup(Object.keys(control.controls).reduce((acc, key) => {
|
|
10595
|
+
acc[key] = cloneControl(control.controls[key]);
|
|
10596
|
+
return acc;
|
|
10597
|
+
}, {}));
|
|
10598
|
+
return clonedGroup;
|
|
10599
|
+
}
|
|
10600
|
+
else if (control instanceof FormArray) {
|
|
10601
|
+
const clonedArray = new FormArray(control.controls.map(cloneControl));
|
|
10602
|
+
return clonedArray;
|
|
10603
|
+
}
|
|
10604
|
+
else if (control instanceof FormControl) {
|
|
10605
|
+
return new FormControl(control.value, control.validator, control.asyncValidator);
|
|
10606
|
+
}
|
|
10607
|
+
else {
|
|
10608
|
+
throw new Error('Unsupported control type');
|
|
10609
|
+
}
|
|
10610
|
+
};
|
|
10611
|
+
const clonedQuestion = cloneControl(question);
|
|
10612
|
+
this.getQuestions(sectionIndex).insert(questionIndex + 1, clonedQuestion);
|
|
10549
10613
|
this.updateIndexNumbers();
|
|
10614
|
+
this.toastService.getSuccessToast('Question cloned successfully');
|
|
10550
10615
|
}
|
|
10551
10616
|
onQuestionDelete(sectionIndex, questionIndex) {
|
|
10552
10617
|
this.getQuestions(sectionIndex).removeAt(questionIndex);
|
|
@@ -10659,6 +10724,7 @@ class CreateTaskComponent {
|
|
|
10659
10724
|
}
|
|
10660
10725
|
}
|
|
10661
10726
|
onSubmit(action) {
|
|
10727
|
+
this.updateIndexNumbers();
|
|
10662
10728
|
const payload = {
|
|
10663
10729
|
...this.taskForm.value,
|
|
10664
10730
|
clientId: this.headerData?.client,
|
|
@@ -11124,7 +11190,7 @@ class TaskConfigureComponent {
|
|
|
11124
11190
|
}
|
|
11125
11191
|
},
|
|
11126
11192
|
error: (err) => {
|
|
11127
|
-
this.toastService.getErrorToast(err?.error?.error
|
|
11193
|
+
this.toastService.getErrorToast(err?.error?.error || 'Something went wrong');
|
|
11128
11194
|
}
|
|
11129
11195
|
});
|
|
11130
11196
|
};
|
|
@@ -11914,7 +11980,6 @@ class TaskComponent {
|
|
|
11914
11980
|
});
|
|
11915
11981
|
}
|
|
11916
11982
|
navigateToTaskConfig(task) {
|
|
11917
|
-
console.log(task);
|
|
11918
11983
|
if (task.publish) {
|
|
11919
11984
|
this.router.navigate(['manage/trax/task-configure'], { queryParams: { taskId: task._id } });
|
|
11920
11985
|
}
|