tango-app-ui-analyse-trax 3.3.1-alpha-task.68 → 3.3.1-alpha-task.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/esm2022/lib/components/action-centre/action-centre.component.mjs +54 -36
  2. package/esm2022/lib/components/activity-log/activity-log.component.mjs +33 -9
  3. package/esm2022/lib/components/chip-dropdown/chip-dropdown.component.mjs +15 -8
  4. package/esm2022/lib/components/create-task/create-task.component.mjs +41 -14
  5. package/esm2022/lib/components/create-task/create-task.data.mjs +12 -12
  6. package/esm2022/lib/components/create-task/create-task.interface.mjs +1 -1
  7. package/esm2022/lib/components/dashboard-info/dashboard-info.component.mjs +38 -71
  8. package/esm2022/lib/components/dashboard-info/monthlyperformance-datepicker/monthlyperformance-datepicker.component.mjs +3 -21
  9. package/esm2022/lib/services/trax.service.mjs +2 -2
  10. package/fesm2022/tango-app-ui-analyse-trax.mjs +188 -165
  11. package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
  12. package/lib/components/action-centre/action-centre.component.d.ts +13 -8
  13. package/lib/components/activity-log/activity-log.component.d.ts +4 -1
  14. package/lib/components/chip-dropdown/chip-dropdown.component.d.ts +2 -1
  15. package/lib/components/create-task/create-task.component.d.ts +4 -1
  16. package/lib/components/create-task/create-task.data.d.ts +11 -11
  17. package/lib/components/create-task/create-task.interface.d.ts +2 -2
  18. package/lib/components/dashboard-info/dashboard-info.component.d.ts +2 -0
  19. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-trax.mjs CHANGED
@@ -421,7 +421,7 @@ class TraxService {
421
421
  return this.http.post(`${this.traxTaskUrl}/actionCenter/approvalTableV1`, data);
422
422
  }
423
423
  getActivityLog(data) {
424
- return this.http.post(`${this.traxTaskUrl}/actionCenter/activityLog`, data);
424
+ return this.http.post(`${this.traxTaskUrl}/actionCenter/activityLogV1`, data);
425
425
  }
426
426
  getTaskDropdownList(data) {
427
427
  return this.http.post(`${this.traxTaskUrl}/dashboard/taskDropdownListV1`, data);
@@ -2407,6 +2407,7 @@ class ChipDropdownComponent {
2407
2407
  showDropdown = false;
2408
2408
  dummyData;
2409
2409
  instanceId;
2410
+ searchValue = '';
2410
2411
  constructor(traxService, cd) {
2411
2412
  this.traxService = traxService;
2412
2413
  this.cd = cd;
@@ -2423,12 +2424,17 @@ class ChipDropdownComponent {
2423
2424
  ngOnChanges(changes) {
2424
2425
  if (changes['data']) {
2425
2426
  let selectedEmail = this.selectedData?.map((item) => item.value);
2426
- this.data = this.data.filter((ele) => !selectedEmail.includes(ele.value));
2427
+ this.data = this.data?.filter((ele) => !selectedEmail.includes(ele.value));
2427
2428
  this.dummyData = this.data ? JSON.parse(JSON.stringify(this.data)) : [];
2428
2429
  console.log(432);
2429
2430
  }
2430
2431
  }
2431
2432
  addBadge(data, index) {
2433
+ if (this.searchValue.trim().length) {
2434
+ this.searchValue = '';
2435
+ this.data = JSON.parse(JSON.stringify(this.dummyData));
2436
+ this.showDropdown = !this.showDropdown;
2437
+ }
2432
2438
  this.selectedData.push(data);
2433
2439
  this.data.splice(index, 1);
2434
2440
  this.selectedList.emit(this.selectedData);
@@ -2439,14 +2445,14 @@ class ChipDropdownComponent {
2439
2445
  this.selectedList.emit(this.selectedData);
2440
2446
  }
2441
2447
  debounceTimer = null;
2442
- findValue(event) {
2443
- if (event.target.value) {
2448
+ findValue() {
2449
+ if (this.searchValue.trim()) {
2444
2450
  this.showDropdown = true;
2445
2451
  }
2446
2452
  clearTimeout(this.debounceTimer);
2447
2453
  this.debounceTimer = setTimeout(() => {
2448
- this.data = this.dummyData.filter((ele) => {
2449
- return ele.name.toLowerCase().includes(event.target.value.toLowerCase());
2454
+ this.data = this.dummyData?.filter((ele) => {
2455
+ return ele.name.toLowerCase().includes(this.searchValue.toLowerCase());
2450
2456
  });
2451
2457
  this.cd.detectChanges();
2452
2458
  }, 1000);
@@ -2462,11 +2468,11 @@ class ChipDropdownComponent {
2462
2468
  }
2463
2469
  }
2464
2470
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipDropdownComponent, deps: [{ token: TraxService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2465
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: { data: "data", selectedData: "selectedData" }, outputs: { selectedList: "selectedList" }, host: { listeners: { "document:click": "clickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\" position-relative\" (clickOutside)=\"showDropdown = false;\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"outer-container d-flex align-items-center position-relative w-100\">\r\n <div class=\"input-container form-control\">\r\n <ng-container *ngFor=\"let item of selectedData;let i=index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{item.name}}</span>\r\n <span (click)=\"removeBadge(item,i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" type=\"text\" class=\"form-control dropdown-input\" (click)=\"toggleDropdown()\" (change)=\"findValue($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3\" *ngIf=\"showDropdown\">\r\n <div [class]=\"data?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n @for( element of data; track element.value; let i = $index){\r\n <div class=\"dropdown-item form-check custom-dropdown-item\" (click)=\"addBadge(element,i)\">\r\n <label class=\"form-check-label\" >{{element.name}}</label>\r\n </div>\r\n }@empty() {\r\n <div>\r\n <label class=\"form-check-label\" >No data found</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;text-transform:lowercase}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"], dependencies: [{ 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"] }] });
2471
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: { data: "data", selectedData: "selectedData" }, outputs: { selectedList: "selectedList" }, host: { listeners: { "document:click": "clickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\" position-relative\" (clickOutside)=\"showDropdown = false;\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"outer-container d-flex align-items-center position-relative w-100\">\r\n <div class=\"input-container form-control\">\r\n <ng-container *ngFor=\"let item of selectedData;let i=index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{item.name}}</span>\r\n <span (click)=\"removeBadge(item,i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" type=\"text\" class=\"form-control dropdown-input\" [(ngModel)]=\"searchValue\" (click)=\"toggleDropdown()\" (change)=\"findValue()\" id=\"searchInput\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3\" *ngIf=\"showDropdown\">\r\n <div [class]=\"data?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n @for( element of data; track element.value; let i = $index){\r\n <div class=\"dropdown-item form-check custom-dropdown-item\" (click)=\"addBadge(element,i)\">\r\n <label>{{element.name}}</label>\r\n </div>\r\n }@empty() {\r\n <div>\r\n <label>No data found</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;text-transform:lowercase}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"], dependencies: [{ 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: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
2466
2472
  }
2467
2473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipDropdownComponent, decorators: [{
2468
2474
  type: Component,
2469
- args: [{ selector: 'lib-chip-dropdown', template: "<div class=\" position-relative\" (clickOutside)=\"showDropdown = false;\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"outer-container d-flex align-items-center position-relative w-100\">\r\n <div class=\"input-container form-control\">\r\n <ng-container *ngFor=\"let item of selectedData;let i=index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{item.name}}</span>\r\n <span (click)=\"removeBadge(item,i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" type=\"text\" class=\"form-control dropdown-input\" (click)=\"toggleDropdown()\" (change)=\"findValue($event)\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3\" *ngIf=\"showDropdown\">\r\n <div [class]=\"data?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n @for( element of data; track element.value; let i = $index){\r\n <div class=\"dropdown-item form-check custom-dropdown-item\" (click)=\"addBadge(element,i)\">\r\n <label class=\"form-check-label\" >{{element.name}}</label>\r\n </div>\r\n }@empty() {\r\n <div>\r\n <label class=\"form-check-label\" >No data found</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;text-transform:lowercase}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"] }]
2475
+ args: [{ selector: 'lib-chip-dropdown', template: "<div class=\" position-relative\" (clickOutside)=\"showDropdown = false;\">\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"outer-container d-flex align-items-center position-relative w-100\">\r\n <div class=\"input-container form-control\">\r\n <ng-container *ngFor=\"let item of selectedData;let i=index\">\r\n <span class=\"chip\">\r\n <span class=\"me-3\">{{item.name}}</span>\r\n <span (click)=\"removeBadge(item,i)\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span>\r\n </ng-container>\r\n <input style=\"min-height: 44px;\" type=\"text\" class=\"form-control dropdown-input\" [(ngModel)]=\"searchValue\" (click)=\"toggleDropdown()\" (change)=\"findValue()\" id=\"searchInput\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3\" *ngIf=\"showDropdown\">\r\n <div [class]=\"data?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n @for( element of data; track element.value; let i = $index){\r\n <div class=\"dropdown-item form-check custom-dropdown-item\" (click)=\"addBadge(element,i)\">\r\n <label>{{element.name}}</label>\r\n </div>\r\n }@empty() {\r\n <div>\r\n <label>No data found</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;text-transform:lowercase}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"] }]
2470
2476
  }], ctorParameters: () => [{ type: TraxService }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
2471
2477
  type: Input
2472
2478
  }], selectedData: [{
@@ -7971,12 +7977,6 @@ class MonthlyperformanceDatepickerComponent {
7971
7977
  .subscribe((data) => {
7972
7978
  if (data) {
7973
7979
  this.headerData = data;
7974
- // if (this.receivedData === 'Checklist') {
7975
- // this.getMonthlyPeformanceData();
7976
- // } else if (this.receivedData === 'User') {
7977
- // this.getMonthlyPeformanceData();
7978
- // } else {
7979
- // }
7980
7980
  }
7981
7981
  });
7982
7982
  }
@@ -7987,14 +7987,6 @@ class MonthlyperformanceDatepickerComponent {
7987
7987
  fromDate: this.headerData.date.startDate,
7988
7988
  toDate: this.headerData.date.endDate,
7989
7989
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
7990
- // storeId: [
7991
- // "11-1743",
7992
- // "11-178",
7993
- // "11-1413",
7994
- // "11-1833",
7995
- // "11-67",
7996
- // "11-709"
7997
- // ],
7998
7990
  clientId: this.headerData.client,
7999
7991
  groupByType: this.receivedData,
8000
7992
  groupByValue: this.monthlyperformce,
@@ -8023,17 +8015,14 @@ class MonthlyperformanceDatepickerComponent {
8023
8015
  const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
8024
8016
  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
8025
8017
  }
8026
- // Get empty days to align the first day of the month with the correct day of the week
8027
8018
  getEmptyDays() {
8028
8019
  const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
8029
8020
  return Array(firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1).fill(0);
8030
8021
  }
8031
- // Get the class name for a given day based on the performance data
8032
8022
  getDayClass(day) {
8033
8023
  const predefinedDay = this.performanceData.find(d => d.date === day);
8034
8024
  return predefinedDay ? predefinedDay.colorClass : '';
8035
8025
  }
8036
- // Navigate to the previous month
8037
8026
  previousMonth() {
8038
8027
  if (this.currentMonth === 0) {
8039
8028
  this.currentMonth = 11;
@@ -8047,7 +8036,6 @@ class MonthlyperformanceDatepickerComponent {
8047
8036
  // let monthlyToDate = this.currentYear+"-"+(this.currentMonth - 1) +"-"+"25"
8048
8037
  this.getMonthlyPeformanceData();
8049
8038
  }
8050
- // Navigate to the next month
8051
8039
  nextMonth() {
8052
8040
  if (this.currentMonth === 11) {
8053
8041
  this.currentMonth = 0;
@@ -8062,11 +8050,11 @@ class MonthlyperformanceDatepickerComponent {
8062
8050
  this.getMonthlyPeformanceData();
8063
8051
  }
8064
8052
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthlyperformanceDatepickerComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: TraxService }], target: i0.ɵɵFactoryTarget.Component });
8065
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MonthlyperformanceDatepickerComponent, selector: "lib-monthlyperformance-datepicker", inputs: { monthlyperformce: "monthlyperformce" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container p-5\">\r\n <!-- triggers=\"mouseenter:mouseleave\" -->\r\n <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n [ngbTooltip]=\"tooltipContent\"\r\n placement=\"bottom\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3701_29180)\">\r\n <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3701_29180\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-container\">\r\n <div class=\"performance-box\">\r\n <div class=\"performance-item\">\r\n <span class=\"number primary900\">1</span>\r\n <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number blue33B5FF\">2</span>\r\n <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number lightBlue6BCAFF\">3</span>\r\n <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number orangeF79009\">4</span>\r\n <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number redF04438\">5</span>\r\n <span class=\"performancetext\">Overall performance below 40%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n \r\n <div class=\"calendar\">\r\n <div class=\"calendar-header my-3\">\r\n <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\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=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\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=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- add nodata -->\r\n <div class=\"calendar-body my-5\">\r\n <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n <div class=\"row no-scrollbar\">\r\n <div class=\"col-lg-12 my-7\">\r\n <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <div *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\">\r\n <div class=\"day-names\">\r\n <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n </div>\r\n <div class=\"calendar-days\">\r\n <!-- Empty days to align the start of the month -->\r\n <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n <!-- Calendar days with dynamic color assignment via CSS classes -->\r\n <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n <span [ngClass]=\"getDayClass(day)\" class=\"symbol-label\">\r\n {{ day }}\r\n </span>\r\n </div>\r\n <!-- <div *ngFor=\"let day of getDaysInMonth()\" [ngClass]=\"getDayClass(day)\" class=\"calendar-day\">\r\n {{ day }}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\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: "directive", type: i6.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
8053
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MonthlyperformanceDatepickerComponent, selector: "lib-monthlyperformance-datepicker", inputs: { monthlyperformce: "monthlyperformce" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container p-5\">\r\n <!-- triggers=\"mouseenter:mouseleave\" -->\r\n <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n [ngbTooltip]=\"tooltipContent\"\r\n placement=\"bottom\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3701_29180)\">\r\n <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3701_29180\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-container\">\r\n <div class=\"performance-box\">\r\n <div class=\"performance-item\">\r\n <span class=\"number primary900\">1</span>\r\n <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number blue33B5FF\">2</span>\r\n <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number lightBlue6BCAFF\">3</span>\r\n <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number orangeF79009\">4</span>\r\n <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number redF04438\">5</span>\r\n <span class=\"performancetext\">Overall performance below 40%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n \r\n <div class=\"calendar\">\r\n <div class=\"calendar-header my-3\">\r\n <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\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=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\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=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- add nodata -->\r\n <div class=\"calendar-body my-5\">\r\n <!-- <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n <div class=\"row no-scrollbar\">\r\n <div class=\"col-lg-12 my-7\">\r\n <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <!-- *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\" -->\r\n <div >\r\n <div class=\"day-names\">\r\n <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n </div>\r\n <div class=\"calendar-days\">\r\n <!-- Empty days to align the start of the month -->\r\n <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n <!-- Calendar days with dynamic color assignment via CSS classes -->\r\n <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n <span [ngClass]=\"getDayClass(day)\" class=\"symbol-label\">\r\n {{ day }}\r\n </span>\r\n </div>\r\n <!-- <div *ngFor=\"let day of getDaysInMonth()\" [ngClass]=\"getDayClass(day)\" class=\"calendar-day\">\r\n {{ day }}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\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.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
8066
8054
  }
8067
8055
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthlyperformanceDatepickerComponent, decorators: [{
8068
8056
  type: Component,
8069
- args: [{ selector: 'lib-monthlyperformance-datepicker', template: "<div class=\"calendar-container p-5\">\r\n <!-- triggers=\"mouseenter:mouseleave\" -->\r\n <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n [ngbTooltip]=\"tooltipContent\"\r\n placement=\"bottom\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3701_29180)\">\r\n <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3701_29180\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-container\">\r\n <div class=\"performance-box\">\r\n <div class=\"performance-item\">\r\n <span class=\"number primary900\">1</span>\r\n <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number blue33B5FF\">2</span>\r\n <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number lightBlue6BCAFF\">3</span>\r\n <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number orangeF79009\">4</span>\r\n <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number redF04438\">5</span>\r\n <span class=\"performancetext\">Overall performance below 40%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n \r\n <div class=\"calendar\">\r\n <div class=\"calendar-header my-3\">\r\n <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\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=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\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=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- add nodata -->\r\n <div class=\"calendar-body my-5\">\r\n <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n <div class=\"row no-scrollbar\">\r\n <div class=\"col-lg-12 my-7\">\r\n <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <div *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\">\r\n <div class=\"day-names\">\r\n <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n </div>\r\n <div class=\"calendar-days\">\r\n <!-- Empty days to align the start of the month -->\r\n <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n <!-- Calendar days with dynamic color assignment via CSS classes -->\r\n <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n <span [ngClass]=\"getDayClass(day)\" class=\"symbol-label\">\r\n {{ day }}\r\n </span>\r\n </div>\r\n <!-- <div *ngFor=\"let day of getDaysInMonth()\" [ngClass]=\"getDayClass(day)\" class=\"calendar-day\">\r\n {{ day }}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\n"] }]
8057
+ args: [{ selector: 'lib-monthlyperformance-datepicker', template: "<div class=\"calendar-container p-5\">\r\n <!-- triggers=\"mouseenter:mouseleave\" -->\r\n <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n [ngbTooltip]=\"tooltipContent\"\r\n placement=\"bottom\"\r\n triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3701_29180)\">\r\n <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3701_29180\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-container\">\r\n <div class=\"performance-box\">\r\n <div class=\"performance-item\">\r\n <span class=\"number primary900\">1</span>\r\n <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number blue33B5FF\">2</span>\r\n <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number lightBlue6BCAFF\">3</span>\r\n <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number orangeF79009\">4</span>\r\n <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n </div>\r\n <div class=\"performance-item\">\r\n <span class=\"number redF04438\">5</span>\r\n <span class=\"performancetext\">Overall performance below 40%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n \r\n <div class=\"calendar\">\r\n <div class=\"calendar-header my-3\">\r\n <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\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=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\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=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- add nodata -->\r\n <div class=\"calendar-body my-5\">\r\n <!-- <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n <div class=\"row no-scrollbar\">\r\n <div class=\"col-lg-12 my-7\">\r\n <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <!-- *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\" -->\r\n <div >\r\n <div class=\"day-names\">\r\n <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n </div>\r\n <div class=\"calendar-days\">\r\n <!-- Empty days to align the start of the month -->\r\n <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n <!-- Calendar days with dynamic color assignment via CSS classes -->\r\n <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n <span [ngClass]=\"getDayClass(day)\" class=\"symbol-label\">\r\n {{ day }}\r\n </span>\r\n </div>\r\n <!-- <div *ngFor=\"let day of getDaysInMonth()\" [ngClass]=\"getDayClass(day)\" class=\"calendar-day\">\r\n {{ day }}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\n"] }]
8070
8058
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: TraxService }], propDecorators: { monthlyperformce: [{
8071
8059
  type: Input
8072
8060
  }] } });
@@ -8146,6 +8134,8 @@ class DashboardInfoComponent {
8146
8134
  offset;
8147
8135
  dateLength;
8148
8136
  checklistInfoDate;
8137
+ refreshDropdown = true;
8138
+ refreshuserDropdown = true;
8149
8139
  constructor(route, router, gs, changeDetector, toast, TraxService, fb, pageInfo, toastService) {
8150
8140
  this.route = route;
8151
8141
  this.router = router;
@@ -8158,8 +8148,6 @@ class DashboardInfoComponent {
8158
8148
  this.toastService = toastService;
8159
8149
  }
8160
8150
  ngOnDestroy() {
8161
- // this.detach.next(true);
8162
- // this.detach.complete();
8163
8151
  this.destroy$.next();
8164
8152
  this.destroy$.complete();
8165
8153
  }
@@ -8253,37 +8241,40 @@ class DashboardInfoComponent {
8253
8241
  fromDate: this.headerData.date.startDate,
8254
8242
  toDate: this.headerData.date.endDate,
8255
8243
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
8256
- // storeId: [
8257
- // "11-1743",
8258
- // "11-178",
8259
- // "11-1413",
8260
- // "11-1833",
8261
- // "11-67",
8262
- // "11-709"
8263
- // ],
8264
8244
  clientId: this.headerData.client,
8265
8245
  };
8266
8246
  this.TraxService.getUserlistDropdownData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
8267
8247
  if (response?.code === 200 && response?.status === "success") {
8268
- // Access the checklistData array from the response
8269
- this.userlistDropdown = response.data?.userData || [];
8248
+ this.userlistDropdown = response.data?.userData;
8270
8249
  this.selectedUser = this.userlistDropdown.find(item => item.userEmail === this.selectedvalue);
8271
8250
  if (this.selectedUser) {
8272
- setTimeout(() => {
8273
- this.userlistselectControl.setValue(this.selectedUser.userEmail);
8274
- this.selectedSourceCheckListId = this.selectedUser.userEmail;
8275
- this.changeDetector.detectChanges();
8276
- }, 100);
8251
+ // setTimeout(() => {
8252
+ this.userlistselectControl.setValue(this.selectedUser.userEmail);
8253
+ this.selectedSourceCheckListId = this.selectedUser.userEmail;
8254
+ this.checklistNoData = false;
8255
+ this.changeDetector.detectChanges();
8256
+ // }, 100);
8277
8257
  }
8278
8258
  else if (this.userlistDropdown.length > 0) {
8279
8259
  this.userlistselectControl.setValue(this.userlistDropdown[0].userEmail);
8280
8260
  this.selectedUser = this.userlistDropdown[0];
8261
+ this.infoCardsData = [];
8262
+ this.checklistNoData = true;
8263
+ this.infoCardNoData = true;
8281
8264
  }
8282
8265
  }
8283
8266
  else {
8284
8267
  this.userlistDropdown = [];
8268
+ this.refreshuserDropdown = false;
8269
+ setTimeout(() => {
8270
+ this.refreshuserDropdown = true;
8271
+ this.changeDetector.detectChanges();
8272
+ }, 0);
8273
+ this.infoCardsData = [];
8274
+ this.checklistNoData = true;
8275
+ this.infoCardNoData = true;
8276
+ this.changeDetector.detectChanges();
8285
8277
  }
8286
- this.changeDetector.detectChanges();
8287
8278
  }, error => {
8288
8279
  this.userlistDropdown = [];
8289
8280
  this.changeDetector.detectChanges();
@@ -8293,34 +8284,38 @@ class DashboardInfoComponent {
8293
8284
  const requestData = {
8294
8285
  fromDate: this.headerData.date.startDate,
8295
8286
  toDate: this.headerData.date.endDate,
8296
- // storeId: [
8297
- // "11-1743",
8298
- // "11-178",
8299
- // "11-1413",
8300
- // "11-1833",
8301
- // "11-67",
8302
- // "11-709"
8303
- // ],
8304
8287
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
8305
8288
  clientId: this.headerData.client,
8306
8289
  };
8307
8290
  this.TraxService.getChecklistDropdownDashboardData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
8308
8291
  if (response?.code === 200 && response?.status === "success") {
8309
- this.checklistDropdown = response.data?.checklistData || [];
8292
+ this.checklistDropdown = response.data?.checklistData;
8310
8293
  this.selectedChecklist = this.checklistDropdown.find(item => item.sourceCheckList_id === this.selectedvalue);
8311
8294
  if (this.selectedChecklist) {
8312
8295
  this.checklistselectControl.setValue(this.selectedChecklist.sourceCheckList_id);
8313
8296
  this.selectedChecklistType = this.selectedChecklist.checkListType;
8314
8297
  this.selectedvalue = this.selectedChecklist.sourceCheckList_id;
8298
+ this.checklistNoData = false;
8315
8299
  this.changeDetector.detectChanges();
8316
8300
  }
8317
8301
  else if (this.checklistDropdown.length > 0) {
8318
8302
  this.checklistselectControl.setValue(this.checklistDropdown[0].sourceCheckList_id);
8319
- this.selectedChecklist = this.checklistDropdown[0];
8303
+ this.infoCardsData = [];
8304
+ this.checklistNoData = true;
8305
+ this.infoCardNoData = true;
8320
8306
  }
8321
8307
  }
8322
8308
  else {
8323
8309
  this.checklistDropdown = [];
8310
+ this.refreshDropdown = false;
8311
+ setTimeout(() => {
8312
+ this.refreshDropdown = true;
8313
+ this.changeDetector.detectChanges();
8314
+ }, 0);
8315
+ this.infoCardsData = [];
8316
+ this.checklistNoData = true;
8317
+ this.infoCardNoData = true;
8318
+ this.changeDetector.detectChanges();
8324
8319
  }
8325
8320
  }, error => {
8326
8321
  this.checklistDropdown = [];
@@ -8335,14 +8330,6 @@ class DashboardInfoComponent {
8335
8330
  fromDate: this.headerData.date.startDate,
8336
8331
  toDate: this.headerData.date.endDate,
8337
8332
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
8338
- // storeId: [
8339
- // "11-1743",
8340
- // "11-178",
8341
- // "11-1413",
8342
- // "11-1833",
8343
- // "11-67",
8344
- // "11-709"
8345
- // ],
8346
8333
  clientId: this.headerData.client,
8347
8334
  groupByType: this.receivedData,
8348
8335
  groupByValue: this.selectedvalue,
@@ -8374,14 +8361,6 @@ class DashboardInfoComponent {
8374
8361
  fromDate: this.headerData.date.startDate,
8375
8362
  toDate: this.headerData.date.endDate,
8376
8363
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
8377
- // storeId: [
8378
- // "11-1743",
8379
- // "11-178",
8380
- // "11-1413",
8381
- // "11-1833",
8382
- // "11-67",
8383
- // "11-709"
8384
- // ],
8385
8364
  clientId: this.headerData.client,
8386
8365
  groupByType: this.receivedData,
8387
8366
  groupByValue: this.selectedvalue,
@@ -8420,15 +8399,6 @@ class DashboardInfoComponent {
8420
8399
  const requestData = {
8421
8400
  fromDate: this.headerData.date.startDate,
8422
8401
  toDate: this.headerData.date.endDate,
8423
- // storeId: ["11-253", "11-511","11-1176"],
8424
- // storeId: [
8425
- // "11-1743",
8426
- // "11-178",
8427
- // "11-1413",
8428
- // "11-1833",
8429
- // "11-67",
8430
- // "11-709"
8431
- // ],
8432
8402
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
8433
8403
  clientId: this.headerData.client,
8434
8404
  limit: this.itemsPerPage,
@@ -8447,9 +8417,6 @@ class DashboardInfoComponent {
8447
8417
  this.checklistLoading = false;
8448
8418
  if (response?.code === 200 && response?.status === "success") {
8449
8419
  this.infoChecklistData = response.data.checklistInfo;
8450
- // this.statusselectControl = [...new Set(this.infoChecklistData.map(item => item.checklistStatus))];
8451
- // this.onValueChangeStatusSelect(value);
8452
- // this.infoChecklistData = response.data.checklistInfo.checklistStatus;
8453
8420
  this.totalItems = response.data.totalCount;
8454
8421
  this.setPaginationSizes();
8455
8422
  this.checklistLoading = false;
@@ -8538,18 +8505,6 @@ class DashboardInfoComponent {
8538
8505
  this.pageSize = this.totalItems;
8539
8506
  }
8540
8507
  }
8541
- // onValueChangeChecklist(event: any): void {
8542
- // this.selectedvalue = event;
8543
- // this.selectedChecklist = this.checklistDropdown.find(item => item._id === event);
8544
- // if (this.selectedChecklist) {
8545
- // this.selectedChecklistType = this.selectedChecklist.checkListType;
8546
- // this.selectedSourceCheckListId = this.selectedChecklist.sourceCheckList_id;
8547
- // this.changeDetector.detectChanges();
8548
- // this.getInfoCardsData();
8549
- // this.getInfoComparisonCardsData();
8550
- // this.getChecklistInfoData();
8551
- // }
8552
- // }
8553
8508
  onChecklistSelect(event) {
8554
8509
  this.selectedChecklist = this.checklistDropdown.find(item => item._id === event?._id);
8555
8510
  if (this.selectedChecklist) {
@@ -8675,11 +8630,11 @@ class DashboardInfoComponent {
8675
8630
  });
8676
8631
  }
8677
8632
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardInfoComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: TraxService }, { token: i1.FormBuilder }, { token: i2$1.PageInfoService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
8678
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DashboardInfoComponent, selector: "lib-dashboard-info", ngImport: i0, template: "<div *ngIf=\"receivedData === 'Checklist'\" class=\"card mb-3\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngIf=\"selectedChecklist\" class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'Checklist'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <!-- <div class=\"col-md-4 w-200px\"> -->\r\n <lib-select [items]=\"checklistDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedChecklist]\" (selected)=\"onChecklistSelect($event)\">\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n\r\n <!-- <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n <!-- </div> -->\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap mt-3\">\r\n <!-- <div class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n {{ selectedChecklist?.checkListName }}\r\n </div> -->\r\n\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <span *ngIf=\"selectedChecklist?.publish\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M7.9987 14.6666C11.6806 14.6666 14.6654 11.6818 14.6654 7.99992C14.6654 4.31802 11.6806 1.33325 7.9987 1.33325C4.3168 1.33325 1.33203 4.31802 1.33203 7.99992C1.33203 11.6818 4.3168 14.6666 7.9987 14.6666Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n\r\n <span *ngIf=\"!selectedChecklist?.publish\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.9987 13.6666C10.6806 13.6666 13.6654 10.6818 13.6654 6.99992C13.6654 3.31802 10.6806 0.333252 6.9987 0.333252C3.3168 0.333252 0.332031 3.31802 0.332031 6.99992C0.332031 10.6818 3.3168 13.6666 6.9987 13.6666Z\"\r\n fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedChecklist?.createdByName }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ selectedChecklist?.storeCount?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) || '--' }} Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{selectedChecklist.scheduleRepeatedType === 'onetime' ? 'Single' : (selectedChecklist?.scheduleRepeatedType || '--' )}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ selectedChecklist?.scheduleStartTime?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }} - {{\r\n selectedChecklist?.scheduleEndTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'User'\" class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'user'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2 mt-2\">\r\n {{ selectedUser?.userNameChar }}\r\n </span>\r\n </div>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\"> \r\n <lib-select \r\n [items]=\"userlistDropdown\" \r\n [multi]=\"false\" \r\n [searchField]=\"'userName'\" \r\n [idField]=\"'userEmail'\" \r\n [selectedValues]=\"[selectedUser]\" \r\n (selected)=\"onUserSelect($event)\" \r\n >\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n <!-- <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"userlistselectControl\" [idField]=\"'userEmail'\"\r\n [nameField]=\"'userName'\" [data]=\"userlistDropdown\" class=\"w-100\"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeUserChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div> -->\r\n </form>\r\n\r\n <div *ngIf=\"selectedUser?.role\" class=\"checklist-details d-flex flex-wrap mt-2\">\r\n <div class=\"d-flex align-items-center badge badge-light-primary me-3 my-3\">\r\n {{ selectedUser?.role }}\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-9\">\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Total instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--'}}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.totalInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.totalInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.totalInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.totalInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completed instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completedInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completedInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completedInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.completedInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Flags\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{ infoComparisonCardsData?.flags?.comparisonData\r\n !==null ? infoComparisonCardsData?.flags?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n <!-- <div class=\"avgcount\">Avg Flag Rate : {{ infoCardsData.flags.count ? '50%' : 'N/A' }}</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n\r\n <div class=\"infocount\">\r\n {{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}%\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }} %</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount\">\r\n\r\n {{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null\r\n ?infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'User'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--'}} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs last\r\n <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null ?\r\n infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span class=\"week-font\"> vs last <span\r\n *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Assigned Tasks\r\n </div>\r\n <div class=\"infocount\"><u>6</u>\r\n <div><span class=\"mt-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"mt-2 ms-2\"><span class=\"percent-value\">13%</span><span\r\n class=\"week-font\"> vs\r\n last week</span></span></div>\r\n <div class=\"actiondownload\">View All </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"infoCardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"infoCardNoData && !infoCardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Checklist Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"col-3\">\r\n <lib-monthlyperformance-datepicker\r\n [monthlyperformce]=\"selectedSourceCheckListId\"></lib-monthlyperformance-datepicker>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"receivedData === 'Store'\" class=\"row mb-4 d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.activeUnique !==null ?\r\n infoCardsData?.activeUnique?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'\r\n }}</span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.notSubmittedInstances?.count !==null ?\r\n infoCardsData?.notSubmittedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}</span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.open !==null ?\r\n infoCardsData?.notSubmittedInstances?.open?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.inprogress !==null ?\r\n infoCardsData?.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.delay ?\r\n infoCardsData?.notSubmittedInstances?.delay.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Delay in Submission</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null?\r\n infoComparisonCardsData?.completionScore?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null?\r\n infoComparisonCardsData?.complianceRate?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"infoCardsData?.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\">\r\n <u>{{\r\n infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</u></div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.flags?.comparisonData !==null ?\r\n infoComparisonCardsData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateValue('weekly')\">1W</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- {{receivedData}} -->\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"receivedData !== 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by checklist\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\">\r\n <a [routerLink]=\"['/manage/trax/createChecklist']\" *ngIf=\"receivedData === 'Store'\"\r\n type=\"button\" class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\"\r\n tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \"\r\n class=\"cursor-pointer\" (click)=\"sortData('date_string')\">Date\r\n <svg [ngClass]=\"sortColumName === 'date_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Store' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">CheckList Name\r\n <svg [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Checklist Owner</th>\r\n <th *ngIf=\"receivedData !== 'User'\">Submitted By</th>\r\n\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedby' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Flags</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of infoChecklistData\">\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \">\r\n <div class=\"table-title\">{{ item.date_string }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData === 'Store' || receivedData === 'User'\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ item.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span class=\"table-titlechecklist\">{{\r\n item.checkListName }}</span>\r\n </td>\r\n\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\">\r\n <div class=\"table-title\">{{ item.storeName }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userName }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData !== 'User'\">\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td class=\"table-title\">\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-success': item.checklistStatus === 'Submitted',\r\n 'badge-light-warning': item.checklistStatus === 'In Progress',\r\n 'badge-light-primary': item.checklistStatus === 'Open',\r\n 'badge-light-danger': item.checklistStatus === 'delayed'\r\n }\">{{ item.checklistStatus | titlecase }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.submitTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedChecklist !==null ? item?.flaggedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <ng-container *ngIf=\"item.checklistStatus === 'Submitted'\">\r\n <!-- <span [routerLink]=\"['/manage/trax/gallery']\"\r\n [queryParams]=\"{ storeId: item.store_id, checklistType: item.checkListType, ChecklistDate: item.checklistDate, checklistId: item.sourceCheckList_id }\"\r\n class=\"actionview me-4 cursor-pointer\">View</span> -->\r\n <span (click)=\"navigateToGallery(item)\"\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n <span (click)=\"download('pdf',item )\"\r\n class=\"actiondownload cursor-pointer\">Download</span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag > 0 && date !== item.date_string\">\r\n <span [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? reinitiate(item._id) : null\"\r\n class=\"actiondownload\">Reinitiate</span>\r\n </ng-container> -->\r\n <ng-container>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n (click)=\"reinitiate(item._id)\" class=\"actiondownload cursor-pointer\">\r\n Reinitiate\r\n </span>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n class=\"actionview disabled\">\r\n Reinitiate\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag <= 0 && date !== item.date_string\">\r\n <div [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? 'sendalert()': '' \"\r\n class=\"actionalert diasbled\">Send Alert</div>\r\n </ng-container> -->\r\n <ng-container *ngIf=\"item.checklistStatus !== 'Submitted' && !(checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0)\">\r\n <span>--</span>\r\n </ng-container> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"checklistLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"checklistNoData && !checklistLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;border-radius:4px;background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f9fafb}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:21px 12px 40px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.actiondownload{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actionalert{color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.diasbled{cursor:default;color:var(--gray-300, #D0D5DD);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.enabled{font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.table-titlechecklist{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card .card-header{padding:0px 1.5rem}\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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: MonthlyperformanceDatepickerComponent, selector: "lib-monthlyperformance-datepicker", inputs: ["monthlyperformce"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
8633
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DashboardInfoComponent, selector: "lib-dashboard-info", ngImport: i0, template: "<div *ngIf=\"receivedData === 'Checklist'\" class=\"card mb-3\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngIf=\"selectedChecklist\" class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'Checklist'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <!-- <div class=\"col-md-4 w-200px\"> -->\r\n <lib-select *ngIf=\"refreshDropdown\" [items]=\"checklistDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedChecklist]\" (selected)=\"onChecklistSelect($event)\">\r\n </lib-select>\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n \r\n\r\n <!-- <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n <!-- </div> -->\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap mt-3\">\r\n <!-- <div class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n {{ selectedChecklist?.checkListName }}\r\n </div> -->\r\n\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <span *ngIf=\"selectedChecklist?.publish\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M7.9987 14.6666C11.6806 14.6666 14.6654 11.6818 14.6654 7.99992C14.6654 4.31802 11.6806 1.33325 7.9987 1.33325C4.3168 1.33325 1.33203 4.31802 1.33203 7.99992C1.33203 11.6818 4.3168 14.6666 7.9987 14.6666Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n\r\n <span *ngIf=\"!selectedChecklist?.publish\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.9987 13.6666C10.6806 13.6666 13.6654 10.6818 13.6654 6.99992C13.6654 3.31802 10.6806 0.333252 6.9987 0.333252C3.3168 0.333252 0.332031 3.31802 0.332031 6.99992C0.332031 10.6818 3.3168 13.6666 6.9987 13.6666Z\"\r\n fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedChecklist?.createdByName }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ selectedChecklist?.storeCount?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) || '--' }} Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{selectedChecklist.scheduleRepeatedType === 'onetime' ? 'Single' : (selectedChecklist?.scheduleRepeatedType || '--' )}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ selectedChecklist?.scheduleStartTime?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }} - {{\r\n selectedChecklist?.scheduleEndTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'User'\" class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'user'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2 mt-2\">\r\n {{ selectedUser?.userNameChar }}\r\n </span>\r\n </div>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\"> \r\n <lib-select *ngIf=\"refreshuserDropdown\"\r\n [items]=\"userlistDropdown\" \r\n [multi]=\"false\" \r\n [searchField]=\"'userName'\" \r\n [idField]=\"'userEmail'\" \r\n [selectedValues]=\"[selectedUser]\" \r\n (selected)=\"onUserSelect($event)\" \r\n >\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n <!-- <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"userlistselectControl\" [idField]=\"'userEmail'\"\r\n [nameField]=\"'userName'\" [data]=\"userlistDropdown\" class=\"w-100\"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeUserChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div> -->\r\n </form>\r\n\r\n <div *ngIf=\"selectedUser?.role\" class=\"checklist-details d-flex flex-wrap mt-2\">\r\n <div class=\"d-flex align-items-center badge badge-light-primary me-3 my-3\">\r\n {{ selectedUser?.role }}\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-9\">\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Total instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--'}}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.totalInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.totalInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.totalInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.totalInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completed instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completedInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completedInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completedInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.completedInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Flags\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{ infoComparisonCardsData?.flags?.comparisonData\r\n !==null ? infoComparisonCardsData?.flags?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n <!-- <div class=\"avgcount\">Avg Flag Rate : {{ infoCardsData.flags.count ? '50%' : 'N/A' }}</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n\r\n <div class=\"infocount\">\r\n {{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}%\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }} %</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount\">\r\n\r\n {{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null\r\n ?infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'User'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--'}} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs last\r\n <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null ?\r\n infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span class=\"week-font\"> vs last <span\r\n *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Assigned Tasks\r\n </div>\r\n <div class=\"infocount\"><u>6</u>\r\n <div><span class=\"mt-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"mt-2 ms-2\"><span class=\"percent-value\">13%</span><span\r\n class=\"week-font\"> vs\r\n last week</span></span></div>\r\n <div class=\"actiondownload\">View All </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"infoCardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"infoCardNoData && !infoCardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Checklist Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"col-3\">\r\n <lib-monthlyperformance-datepicker\r\n [monthlyperformce]=\"selectedSourceCheckListId\"></lib-monthlyperformance-datepicker>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"receivedData === 'Store'\" class=\"row mb-4 d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.activeUnique !==null ?\r\n infoCardsData?.activeUnique?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'\r\n }}</span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.notSubmittedInstances?.count !==null ?\r\n infoCardsData?.notSubmittedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}</span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.open !==null ?\r\n infoCardsData?.notSubmittedInstances?.open?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.inprogress !==null ?\r\n infoCardsData?.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.delay ?\r\n infoCardsData?.notSubmittedInstances?.delay.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Delay in Submission</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null?\r\n infoComparisonCardsData?.completionScore?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null?\r\n infoComparisonCardsData?.complianceRate?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"infoCardsData?.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\">\r\n <u>{{\r\n infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</u></div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.flags?.comparisonData !==null ?\r\n infoComparisonCardsData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateValue('weekly')\">1W</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- {{receivedData}} -->\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"receivedData !== 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by checklist\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\">\r\n <a [routerLink]=\"['/manage/trax/createChecklist']\" *ngIf=\"receivedData === 'Store'\"\r\n type=\"button\" class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\"\r\n tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \"\r\n class=\"cursor-pointer\" (click)=\"sortData('date_string')\">Date\r\n <svg [ngClass]=\"sortColumName === 'date_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Store' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">CheckList Name\r\n <svg [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Checklist Owner</th>\r\n <th *ngIf=\"receivedData !== 'User'\">Submitted By</th>\r\n\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedby' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Flags</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of infoChecklistData\">\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \">\r\n <div class=\"table-title\">{{ item.date_string }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData === 'Store' || receivedData === 'User'\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ item.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span class=\"table-titlechecklist\">{{\r\n item.checkListName }}</span>\r\n </td>\r\n\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\">\r\n <div class=\"table-title\">{{ item.storeName }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userName }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData !== 'User'\">\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td class=\"table-title\">\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-success': item.checklistStatus === 'Submitted',\r\n 'badge-light-warning': item.checklistStatus === 'In Progress',\r\n 'badge-light-primary': item.checklistStatus === 'Open',\r\n 'badge-light-danger': item.checklistStatus === 'delayed'\r\n }\">{{ item.checklistStatus | titlecase }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.submitTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedChecklist !==null ? item?.flaggedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <ng-container *ngIf=\"item.checklistStatus === 'Submitted'\">\r\n <!-- <span [routerLink]=\"['/manage/trax/gallery']\"\r\n [queryParams]=\"{ storeId: item.store_id, checklistType: item.checkListType, ChecklistDate: item.checklistDate, checklistId: item.sourceCheckList_id }\"\r\n class=\"actionview me-4 cursor-pointer\">View</span> -->\r\n <span (click)=\"navigateToGallery(item)\"\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n <span (click)=\"download('pdf',item )\"\r\n class=\"actiondownload cursor-pointer\">Download</span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag > 0 && date !== item.date_string\">\r\n <span [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? reinitiate(item._id) : null\"\r\n class=\"actiondownload\">Reinitiate</span>\r\n </ng-container> -->\r\n <ng-container>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n (click)=\"reinitiate(item._id)\" class=\"actiondownload cursor-pointer\">\r\n Reinitiate\r\n </span>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n class=\"actionview disabled\">\r\n Reinitiate\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag <= 0 && date !== item.date_string\">\r\n <div [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? 'sendalert()': '' \"\r\n class=\"actionalert diasbled\">Send Alert</div>\r\n </ng-container> -->\r\n <ng-container *ngIf=\"item.checklistStatus !== 'Submitted' && !(checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0)\">\r\n <span>--</span>\r\n </ng-container> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"checklistLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"checklistNoData && !checklistLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;border-radius:4px;background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f9fafb}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:21px 12px 40px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.actiondownload{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actionalert{color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.diasbled{cursor:default;color:var(--gray-300, #D0D5DD);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.enabled{font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.table-titlechecklist{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card .card-header{padding:0px 1.5rem}\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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: MonthlyperformanceDatepickerComponent, selector: "lib-monthlyperformance-datepicker", inputs: ["monthlyperformce"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
8679
8634
  }
8680
8635
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardInfoComponent, decorators: [{
8681
8636
  type: Component,
8682
- args: [{ selector: 'lib-dashboard-info', template: "<div *ngIf=\"receivedData === 'Checklist'\" class=\"card mb-3\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngIf=\"selectedChecklist\" class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'Checklist'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <!-- <div class=\"col-md-4 w-200px\"> -->\r\n <lib-select [items]=\"checklistDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedChecklist]\" (selected)=\"onChecklistSelect($event)\">\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n\r\n <!-- <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n <!-- </div> -->\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap mt-3\">\r\n <!-- <div class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n {{ selectedChecklist?.checkListName }}\r\n </div> -->\r\n\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <span *ngIf=\"selectedChecklist?.publish\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M7.9987 14.6666C11.6806 14.6666 14.6654 11.6818 14.6654 7.99992C14.6654 4.31802 11.6806 1.33325 7.9987 1.33325C4.3168 1.33325 1.33203 4.31802 1.33203 7.99992C1.33203 11.6818 4.3168 14.6666 7.9987 14.6666Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n\r\n <span *ngIf=\"!selectedChecklist?.publish\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.9987 13.6666C10.6806 13.6666 13.6654 10.6818 13.6654 6.99992C13.6654 3.31802 10.6806 0.333252 6.9987 0.333252C3.3168 0.333252 0.332031 3.31802 0.332031 6.99992C0.332031 10.6818 3.3168 13.6666 6.9987 13.6666Z\"\r\n fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedChecklist?.createdByName }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ selectedChecklist?.storeCount?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) || '--' }} Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{selectedChecklist.scheduleRepeatedType === 'onetime' ? 'Single' : (selectedChecklist?.scheduleRepeatedType || '--' )}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ selectedChecklist?.scheduleStartTime?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }} - {{\r\n selectedChecklist?.scheduleEndTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'User'\" class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'user'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2 mt-2\">\r\n {{ selectedUser?.userNameChar }}\r\n </span>\r\n </div>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\"> \r\n <lib-select \r\n [items]=\"userlistDropdown\" \r\n [multi]=\"false\" \r\n [searchField]=\"'userName'\" \r\n [idField]=\"'userEmail'\" \r\n [selectedValues]=\"[selectedUser]\" \r\n (selected)=\"onUserSelect($event)\" \r\n >\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n <!-- <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"userlistselectControl\" [idField]=\"'userEmail'\"\r\n [nameField]=\"'userName'\" [data]=\"userlistDropdown\" class=\"w-100\"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeUserChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div> -->\r\n </form>\r\n\r\n <div *ngIf=\"selectedUser?.role\" class=\"checklist-details d-flex flex-wrap mt-2\">\r\n <div class=\"d-flex align-items-center badge badge-light-primary me-3 my-3\">\r\n {{ selectedUser?.role }}\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-9\">\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Total instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--'}}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.totalInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.totalInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.totalInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.totalInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completed instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completedInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completedInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completedInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.completedInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Flags\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{ infoComparisonCardsData?.flags?.comparisonData\r\n !==null ? infoComparisonCardsData?.flags?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n <!-- <div class=\"avgcount\">Avg Flag Rate : {{ infoCardsData.flags.count ? '50%' : 'N/A' }}</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n\r\n <div class=\"infocount\">\r\n {{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}%\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }} %</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount\">\r\n\r\n {{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null\r\n ?infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'User'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--'}} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs last\r\n <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null ?\r\n infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span class=\"week-font\"> vs last <span\r\n *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Assigned Tasks\r\n </div>\r\n <div class=\"infocount\"><u>6</u>\r\n <div><span class=\"mt-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"mt-2 ms-2\"><span class=\"percent-value\">13%</span><span\r\n class=\"week-font\"> vs\r\n last week</span></span></div>\r\n <div class=\"actiondownload\">View All </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"infoCardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"infoCardNoData && !infoCardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Checklist Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"col-3\">\r\n <lib-monthlyperformance-datepicker\r\n [monthlyperformce]=\"selectedSourceCheckListId\"></lib-monthlyperformance-datepicker>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"receivedData === 'Store'\" class=\"row mb-4 d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.activeUnique !==null ?\r\n infoCardsData?.activeUnique?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'\r\n }}</span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.notSubmittedInstances?.count !==null ?\r\n infoCardsData?.notSubmittedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}</span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.open !==null ?\r\n infoCardsData?.notSubmittedInstances?.open?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.inprogress !==null ?\r\n infoCardsData?.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.delay ?\r\n infoCardsData?.notSubmittedInstances?.delay.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Delay in Submission</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null?\r\n infoComparisonCardsData?.completionScore?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null?\r\n infoComparisonCardsData?.complianceRate?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"infoCardsData?.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\">\r\n <u>{{\r\n infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</u></div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.flags?.comparisonData !==null ?\r\n infoComparisonCardsData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateValue('weekly')\">1W</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- {{receivedData}} -->\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"receivedData !== 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by checklist\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\">\r\n <a [routerLink]=\"['/manage/trax/createChecklist']\" *ngIf=\"receivedData === 'Store'\"\r\n type=\"button\" class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\"\r\n tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \"\r\n class=\"cursor-pointer\" (click)=\"sortData('date_string')\">Date\r\n <svg [ngClass]=\"sortColumName === 'date_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Store' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">CheckList Name\r\n <svg [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Checklist Owner</th>\r\n <th *ngIf=\"receivedData !== 'User'\">Submitted By</th>\r\n\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedby' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Flags</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of infoChecklistData\">\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \">\r\n <div class=\"table-title\">{{ item.date_string }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData === 'Store' || receivedData === 'User'\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ item.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span class=\"table-titlechecklist\">{{\r\n item.checkListName }}</span>\r\n </td>\r\n\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\">\r\n <div class=\"table-title\">{{ item.storeName }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userName }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData !== 'User'\">\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td class=\"table-title\">\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-success': item.checklistStatus === 'Submitted',\r\n 'badge-light-warning': item.checklistStatus === 'In Progress',\r\n 'badge-light-primary': item.checklistStatus === 'Open',\r\n 'badge-light-danger': item.checklistStatus === 'delayed'\r\n }\">{{ item.checklistStatus | titlecase }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.submitTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedChecklist !==null ? item?.flaggedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <ng-container *ngIf=\"item.checklistStatus === 'Submitted'\">\r\n <!-- <span [routerLink]=\"['/manage/trax/gallery']\"\r\n [queryParams]=\"{ storeId: item.store_id, checklistType: item.checkListType, ChecklistDate: item.checklistDate, checklistId: item.sourceCheckList_id }\"\r\n class=\"actionview me-4 cursor-pointer\">View</span> -->\r\n <span (click)=\"navigateToGallery(item)\"\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n <span (click)=\"download('pdf',item )\"\r\n class=\"actiondownload cursor-pointer\">Download</span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag > 0 && date !== item.date_string\">\r\n <span [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? reinitiate(item._id) : null\"\r\n class=\"actiondownload\">Reinitiate</span>\r\n </ng-container> -->\r\n <ng-container>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n (click)=\"reinitiate(item._id)\" class=\"actiondownload cursor-pointer\">\r\n Reinitiate\r\n </span>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n class=\"actionview disabled\">\r\n Reinitiate\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag <= 0 && date !== item.date_string\">\r\n <div [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? 'sendalert()': '' \"\r\n class=\"actionalert diasbled\">Send Alert</div>\r\n </ng-container> -->\r\n <ng-container *ngIf=\"item.checklistStatus !== 'Submitted' && !(checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0)\">\r\n <span>--</span>\r\n </ng-container> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"checklistLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"checklistNoData && !checklistLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;border-radius:4px;background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f9fafb}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:21px 12px 40px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.actiondownload{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actionalert{color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.diasbled{cursor:default;color:var(--gray-300, #D0D5DD);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.enabled{font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.table-titlechecklist{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card .card-header{padding:0px 1.5rem}\n"] }]
8637
+ args: [{ selector: 'lib-dashboard-info', template: "<div *ngIf=\"receivedData === 'Checklist'\" class=\"card mb-3\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngIf=\"selectedChecklist\" class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'Checklist'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\">\r\n <!-- <div class=\"col-md-4 w-200px\"> -->\r\n <lib-select *ngIf=\"refreshDropdown\" [items]=\"checklistDropdown\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" [selectedValues]=\"[selectedChecklist]\" (selected)=\"onChecklistSelect($event)\">\r\n </lib-select>\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n \r\n\r\n <!-- <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n <!-- </div> -->\r\n </form>\r\n <div class=\"checklist-details d-flex flex-wrap mt-3\">\r\n <!-- <div class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n {{ selectedChecklist?.checkListName }}\r\n </div> -->\r\n\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <span *ngIf=\"selectedChecklist?.publish\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M7.9987 14.6666C11.6806 14.6666 14.6654 11.6818 14.6654 7.99992C14.6654 4.31802 11.6806 1.33325 7.9987 1.33325C4.3168 1.33325 1.33203 4.31802 1.33203 7.99992C1.33203 11.6818 4.3168 14.6666 7.9987 14.6666Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n\r\n <span *ngIf=\"!selectedChecklist?.publish\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.9987 13.6666C10.6806 13.6666 13.6654 10.6818 13.6654 6.99992C13.6654 3.31802 10.6806 0.333252 6.9987 0.333252C3.3168 0.333252 0.332031 3.31802 0.332031 6.99992C0.332031 10.6818 3.3168 13.6666 6.9987 13.6666Z\"\r\n fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg><span class=\"mt-2\">{{ selectedChecklist?.createdByName }}</span></span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> {{ selectedChecklist?.storeCount?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) || '--' }} Stores</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{selectedChecklist.scheduleRepeatedType === 'onetime' ? 'Single' : (selectedChecklist?.scheduleRepeatedType || '--' )}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center me-3 checklisttext\">\r\n <span><svg class=\"mx-2 mb-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ selectedChecklist?.scheduleStartTime?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }} - {{\r\n selectedChecklist?.scheduleEndTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'User'\" class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex flex-wrap my-2 pe-2\">\r\n <a [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{type: 'user'}\" class=\"d-flex align-items-center me-3 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2 mt-2\">\r\n {{ selectedUser?.userNameChar }}\r\n </span>\r\n </div>\r\n <form class=\"mt-1 me-3 cursor-pointer\" style=\"min-width: 200px;\" [formGroup]=\"form\"> \r\n <lib-select *ngIf=\"refreshuserDropdown\"\r\n [items]=\"userlistDropdown\" \r\n [multi]=\"false\" \r\n [searchField]=\"'userName'\" \r\n [idField]=\"'userEmail'\" \r\n [selectedValues]=\"[selectedUser]\" \r\n (selected)=\"onUserSelect($event)\" \r\n >\r\n <!-- <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template> -->\r\n </lib-select>\r\n <!-- <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"userlistselectControl\" [idField]=\"'userEmail'\"\r\n [nameField]=\"'userName'\" [data]=\"userlistDropdown\" class=\"w-100\"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeUserChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.userName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div> -->\r\n </form>\r\n\r\n <div *ngIf=\"selectedUser?.role\" class=\"checklist-details d-flex flex-wrap mt-2\">\r\n <div class=\"d-flex align-items-center badge badge-light-primary me-3 my-3\">\r\n {{ selectedUser?.role }}\r\n </div>\r\n </div>\r\n </div>\r\n <!--end::Info-->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-9\">\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"row\">\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Total instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--'}}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.totalInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.totalInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.totalInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.totalInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completed instances\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completedInstances?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completedInstances?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completedInstances?.comparisonData !==null\r\n ?infoComparisonCardsData?.completedInstances?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Flags\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--' }}\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{ infoComparisonCardsData?.flags?.comparisonData\r\n !==null ? infoComparisonCardsData?.flags?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n <!-- <div class=\"avgcount\">Avg Flag Rate : {{ infoCardsData.flags.count ? '50%' : 'N/A' }}</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n\r\n <div class=\"infocount\">\r\n {{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}%\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }} %</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"subinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount\">\r\n\r\n {{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\">\r\n <span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null\r\n ?infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span>\r\n <span class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"receivedData === 'User'\" class=\"row my-3\">\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Completion Score\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--'}} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null ?\r\n infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs last\r\n <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Compliance Rate\r\n </div>\r\n <div class=\"infocount mb-6\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }} %\r\n <div>\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null ?\r\n infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span class=\"week-font\"> vs last <span\r\n *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"totalinfocard\">\r\n <div class=\"headingcard\">\r\n Assigned Tasks\r\n </div>\r\n <div class=\"infocount\"><u>6</u>\r\n <div><span class=\"mt-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg></span><span class=\"mt-2 ms-2\"><span class=\"percent-value\">13%</span><span\r\n class=\"week-font\"> vs\r\n last week</span></span></div>\r\n <div class=\"actiondownload\">View All </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"infoCardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"infoCardNoData && !infoCardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Checklist Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n </div>\r\n\r\n\r\n <div *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\" class=\"col-3\">\r\n <lib-monthlyperformance-datepicker\r\n [monthlyperformce]=\"selectedSourceCheckListId\"></lib-monthlyperformance-datepicker>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"receivedData === 'Store'\" class=\"row mb-4 d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.activeUnique !==null ?\r\n infoCardsData?.activeUnique?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'\r\n }}</span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.totalInstances?.count !==null ?\r\n infoCardsData?.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.notSubmittedInstances?.count !==null ?\r\n infoCardsData?.notSubmittedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}</span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.open !==null ?\r\n infoCardsData?.notSubmittedInstances?.open?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.inprogress !==null ?\r\n infoCardsData?.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.notSubmittedInstances?.delay ?\r\n infoCardsData?.notSubmittedInstances?.delay.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) : '--' }}</div>\r\n <div class=\"cardtext\">Delay in Submission</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardcount\">{{ infoCardsData?.completedInstances?.count !==null ?\r\n infoCardsData?.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.completionScore?.count !==null ?\r\n infoCardsData?.completionScore?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.completionScore?.comparisonData !==null?\r\n infoComparisonCardsData?.completionScore?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">{{ infoCardsData?.complianceRate?.count !==null ?\r\n infoCardsData?.complianceRate?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.complianceRate?.comparisonData !==null?\r\n infoComparisonCardsData?.complianceRate?.comparisonData?.toLocaleString('en-US',\r\n {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"infoCardsData?.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\">\r\n <u>{{\r\n infoCardsData?.flags?.count !==null ?\r\n infoCardsData?.flags?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</u></div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"infoComparisonCardsData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n infoComparisonCardsData?.flags?.comparisonData !==null ?\r\n infoComparisonCardsData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}%</span><span class=\"week-font\"> vs\r\n last <span *ngIf=\"dateType ==='daily'\">day</span><span\r\n *ngIf=\"dateType ==='weekly'\">week</span> <span\r\n *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateValue('weekly')\">1W</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- {{receivedData}} -->\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div>\r\n <form class=\"mt-1\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <div *ngIf=\"receivedData === 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"receivedData !== 'Checklist'\"\r\n class=\"d-flex align-items-center position-relative\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by checklist\"\r\n autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\">\r\n <a [routerLink]=\"['/manage/trax/createChecklist']\" *ngIf=\"receivedData === 'Store'\"\r\n type=\"button\" class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\"\r\n tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \"\r\n class=\"cursor-pointer\" (click)=\"sortData('date_string')\">Date\r\n <svg [ngClass]=\"sortColumName === 'date_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Store' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">CheckList Name\r\n <svg [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_string' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\"\r\n class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Checklist Owner</th>\r\n <th *ngIf=\"receivedData !== 'User'\">Submitted By</th>\r\n\r\n <th>Status</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submitTime_string')\">Submitted On\r\n <svg [ngClass]=\"sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedby' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Flags</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of infoChecklistData\">\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User' \">\r\n <div class=\"table-title\">{{ item.date_string }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData === 'Store' || receivedData === 'User'\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ item.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span class=\"table-titlechecklist\">{{\r\n item.checkListName }}</span>\r\n </td>\r\n\r\n <td *ngIf=\"receivedData === 'Checklist' || receivedData === 'User'\">\r\n <div class=\"table-title\">{{ item.storeName }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userName }}</div>\r\n </td>\r\n <td *ngIf=\"receivedData !== 'User'\">\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td class=\"table-title\">\r\n <span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-success': item.checklistStatus === 'Submitted',\r\n 'badge-light-warning': item.checklistStatus === 'In Progress',\r\n 'badge-light-primary': item.checklistStatus === 'Open',\r\n 'badge-light-danger': item.checklistStatus === 'delayed'\r\n }\">{{ item.checklistStatus | titlecase }}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.submitTime_string?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedChecklist !==null ? item?.flaggedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <ng-container *ngIf=\"item.checklistStatus === 'Submitted'\">\r\n <!-- <span [routerLink]=\"['/manage/trax/gallery']\"\r\n [queryParams]=\"{ storeId: item.store_id, checklistType: item.checkListType, ChecklistDate: item.checklistDate, checklistId: item.sourceCheckList_id }\"\r\n class=\"actionview me-4 cursor-pointer\">View</span> -->\r\n <span (click)=\"navigateToGallery(item)\"\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n <span (click)=\"download('pdf',item )\"\r\n class=\"actiondownload cursor-pointer\">Download</span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag > 0 && date !== item.date_string\">\r\n <span [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? reinitiate(item._id) : null\"\r\n class=\"actiondownload\">Reinitiate</span>\r\n </ng-container> -->\r\n <ng-container>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n (click)=\"reinitiate(item._id)\" class=\"actiondownload cursor-pointer\">\r\n Reinitiate\r\n </span>\r\n <span *ngIf=\"checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0\"\r\n class=\"actionview disabled\">\r\n Reinitiate\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container\r\n *ngIf=\"item.checklistStatus !== 'Submitted' && item.timeFlag <= 0 && date !== item.date_string\">\r\n <div [ngClass]=\"date !== item.date_string ? 'diasbled': ''\"\r\n (click)=\"date !== item.date_string ? 'sendalert()': '' \"\r\n class=\"actionalert diasbled\">Send Alert</div>\r\n </ng-container> -->\r\n <ng-container *ngIf=\"item.checklistStatus !== 'Submitted' && !(checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0)\">\r\n <span>--</span>\r\n </ng-container> \r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"checklistLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"checklistNoData && !checklistLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px;display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;border-radius:4px;background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f9fafb}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:21px 12px 40px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.actiondownload{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actionalert{color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.diasbled{cursor:default;color:var(--gray-300, #D0D5DD);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.enabled{font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:capitalize}.table-titlechecklist{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card .card-header{padding:0px 1.5rem}\n"] }]
8683
8638
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: TraxService }, { type: i1.FormBuilder }, { type: i2$1.PageInfoService }, { type: i3.ToastService }] });
8684
8639
  function getDaysBetweenDates(fromDate, toDate) {
8685
8640
  // Parse the date strings into Date objects
@@ -10069,7 +10024,7 @@ const descriptive_question_template = {
10069
10024
  "runAIDescription": "",
10070
10025
  "allowUploadfromGallery": false,
10071
10026
  "linkType": false,
10072
- "questionReferenceImage": "",
10027
+ "questionReferenceImage": [],
10073
10028
  "descriptivetype": "text",
10074
10029
  "answers": [
10075
10030
  {
@@ -10092,7 +10047,7 @@ const yesorno_question_template = {
10092
10047
  "runAIDescription": "",
10093
10048
  "allowUploadfromGallery": false,
10094
10049
  "linkType": false,
10095
- "questionReferenceImage": "",
10050
+ "questionReferenceImage": [],
10096
10051
  "answers": [
10097
10052
  {
10098
10053
  "answer": "Yes",
@@ -10129,7 +10084,7 @@ const multiplechoicesingle_question_template = {
10129
10084
  "runAIDescription": "",
10130
10085
  "allowUploadfromGallery": false,
10131
10086
  "linkType": false,
10132
- "questionReferenceImage": "",
10087
+ "questionReferenceImage": [],
10133
10088
  "answers": [
10134
10089
  {
10135
10090
  "answer": "",
@@ -10179,7 +10134,7 @@ const multiplechoicemultiple_question_template = {
10179
10134
  "runAIDescription": "",
10180
10135
  "allowUploadfromGallery": false,
10181
10136
  "linkType": false,
10182
- "questionReferenceImage": "",
10137
+ "questionReferenceImage": [],
10183
10138
  "answers": [
10184
10139
  {
10185
10140
  "answer": "",
@@ -10216,7 +10171,7 @@ const descriptiveImage_question_template = {
10216
10171
  "runAIDescription": "",
10217
10172
  "allowUploadfromGallery": false,
10218
10173
  "linkType": false,
10219
- "questionReferenceImage": "",
10174
+ "questionReferenceImage": [],
10220
10175
  "answers": [
10221
10176
  {
10222
10177
  "answer": "",
@@ -10238,7 +10193,7 @@ const image_question_template = {
10238
10193
  "runAIDescription": "",
10239
10194
  "allowUploadfromGallery": false,
10240
10195
  "linkType": false,
10241
- "questionReferenceImage": "",
10196
+ "questionReferenceImage": [],
10242
10197
  "answers": [
10243
10198
  {
10244
10199
  "answer": "",
@@ -10260,7 +10215,7 @@ const video_question_template = {
10260
10215
  "runAIDescription": "",
10261
10216
  "allowUploadfromGallery": true,
10262
10217
  "linkType": false,
10263
- "questionReferenceImage": "",
10218
+ "questionReferenceImage": [],
10264
10219
  "answers": [
10265
10220
  {
10266
10221
  "answer": "",
@@ -10282,7 +10237,7 @@ const multipleImage_question_template = {
10282
10237
  "runAIDescription": "",
10283
10238
  "allowUploadfromGallery": false,
10284
10239
  "linkType": false,
10285
- "questionReferenceImage": "",
10240
+ "questionReferenceImage": [],
10286
10241
  "descriptivetype": "",
10287
10242
  "answers": [
10288
10243
  {
@@ -10306,7 +10261,7 @@ const date_question_template = {
10306
10261
  "runAIDescription": "",
10307
10262
  "allowUploadfromGallery": false,
10308
10263
  "linkType": false,
10309
- "questionReferenceImage": "",
10264
+ "questionReferenceImage": [],
10310
10265
  "answers": [
10311
10266
  {
10312
10267
  "answer": "",
@@ -10328,7 +10283,7 @@ const linearscale_question_template = {
10328
10283
  "runAIDescription": "",
10329
10284
  "allowUploadfromGallery": false,
10330
10285
  "linkType": false,
10331
- "questionReferenceImage": "",
10286
+ "questionReferenceImage": [],
10332
10287
  "answers": [
10333
10288
  {
10334
10289
  "answer": "",
@@ -10352,7 +10307,7 @@ const time_question_template = {
10352
10307
  "runAIDescription": "",
10353
10308
  "allowUploadfromGallery": false,
10354
10309
  "linkType": false,
10355
- "questionReferenceImage": "",
10310
+ "questionReferenceImage": [],
10356
10311
  "answers": [
10357
10312
  {
10358
10313
  "answer": "",
@@ -10424,8 +10379,8 @@ class CreateTaskComponent {
10424
10379
  this.addSectionForm();
10425
10380
  this.addQuestionForm(descriptive_question_template, 0);
10426
10381
  this.addAnswerForm(descriptive_question_template.answers[0], 0, 0);
10427
- // this.getAnswers(0,0).at(0).get('answer')?.removeValidators(Validators.required)
10428
- // this.selectedQuestion = this.getQuestions(0).at(0)
10382
+ this.updateIndexNumbers();
10383
+ this.selectedQuestion = this.getQuestions(0).at(0);
10429
10384
  }
10430
10385
  });
10431
10386
  // this.gs.dataRangeValue
@@ -10473,8 +10428,19 @@ class CreateTaskComponent {
10473
10428
  }
10474
10429
  }
10475
10430
  }
10431
+ this.updateIndexNumbers();
10476
10432
  this.selectedQuestion = this.getQuestions(0).at(0);
10477
10433
  }
10434
+ updateIndexNumbers() {
10435
+ for (let i = 0; i < this.taskForm.controls.sections?.length; i++) {
10436
+ for (let j = 0; j < this.taskForm.controls.sections.at(i)?.controls.questions?.length; j++) {
10437
+ this.getQuestions(i).at(j).get('qno')?.setValue(j + 1);
10438
+ for (let k = 0; k < this.taskForm.controls.sections.at(i)?.controls.questions?.at(j)?.controls.answers?.length; k++) {
10439
+ this.getAnswers(i, j).at(k).get('answeroptionNumber')?.setValue(k + 1);
10440
+ }
10441
+ }
10442
+ }
10443
+ }
10478
10444
  addSectionForm(section) {
10479
10445
  const sectionFormData = this.fb.group({
10480
10446
  id: [section?.id ?? ''],
@@ -10492,7 +10458,7 @@ class CreateTaskComponent {
10492
10458
  runAIDescription: [question?.runAIDescription ?? ''],
10493
10459
  allowUploadfromGallery: [question?.allowUploadfromGallery ?? false],
10494
10460
  linkType: [question?.linkType ?? false],
10495
- questionReferenceImage: [question?.questionReferenceImage ?? ''],
10461
+ questionReferenceImage: [[...question?.questionReferenceImage ?? '']],
10496
10462
  answers: this.fb.array([])
10497
10463
  });
10498
10464
  if (question.answerType === 'descriptive' || question.answerType === 'multipleImage') {
@@ -10562,10 +10528,12 @@ class CreateTaskComponent {
10562
10528
  next: (res) => {
10563
10529
  if (res.data.imgUrl) {
10564
10530
  if (answerIndex === undefined) {
10565
- this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')?.setValue(res.data.imgUrl);
10531
+ this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')
10532
+ ?.setValue(this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')?.value?.concat(res.data.imgUrl));
10566
10533
  }
10567
10534
  else {
10568
- this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')?.setValue(res.data.imgUrl);
10535
+ this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')
10536
+ ?.setValue(res.data.imgUrl);
10569
10537
  }
10570
10538
  }
10571
10539
  },
@@ -10578,17 +10546,26 @@ class CreateTaskComponent {
10578
10546
  onQuestionClone(sectionIndex, questionIndex, question) {
10579
10547
  this.getQuestions(sectionIndex).insert(questionIndex + 1, question);
10580
10548
  this.toastService.getSuccessToast('Question cloned successfully');
10549
+ this.updateIndexNumbers();
10581
10550
  }
10582
10551
  onQuestionDelete(sectionIndex, questionIndex) {
10583
10552
  this.getQuestions(sectionIndex).removeAt(questionIndex);
10553
+ this.updateIndexNumbers();
10584
10554
  this.toastService.getSuccessToast('Question deleted successfully');
10585
10555
  }
10556
+ onDeleteQuestionReferenceImage(sectionIndex, questionIndex, imageIndex) {
10557
+ this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')
10558
+ ?.setValue(this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage').value.filter((_, index) => index !== imageIndex));
10559
+ }
10560
+ onDeleteAnswerReferenceImage(sectionIndex, questionIndex, answerIndex) {
10561
+ this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')?.setValue('');
10562
+ }
10586
10563
  onDeleteReferenceImage(sectionIndex, questionIndex, answerIndex) {
10587
10564
  if (answerIndex !== undefined) {
10588
10565
  this.getAnswers(sectionIndex, questionIndex).at(answerIndex).get('referenceImage')?.setValue('');
10589
10566
  }
10590
10567
  else {
10591
- this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')?.setValue('');
10568
+ this.getQuestions(sectionIndex).at(questionIndex).get('questionReferenceImage')?.setValue([]);
10592
10569
  }
10593
10570
  }
10594
10571
  onValidateResponseChange(event, sectionIndex, questionIndex, answerIndex) {
@@ -10598,16 +10575,24 @@ class CreateTaskComponent {
10598
10575
  }
10599
10576
  onAnswerDelete(sectionIndex, questionIndex, answerIndex) {
10600
10577
  this.getAnswers(sectionIndex, questionIndex).removeAt(answerIndex);
10578
+ this.updateIndexNumbers();
10601
10579
  this.toastService.getSuccessToast('Answer deleted successfully');
10602
10580
  }
10603
10581
  addNewAnswer(sectionIndex, questionIndex, type) {
10604
10582
  if (type === 'multiplechoicesingle' || type === 'multiplechoicemultiple') {
10605
10583
  this.addAnswerForm(multiplechoice_answer_template, sectionIndex, questionIndex);
10584
+ this.updateIndexNumbers();
10606
10585
  this.toastService.getSuccessToast('Answer added successfully');
10607
10586
  }
10608
10587
  }
10609
- addNewQuestion(sectionIndex) {
10588
+ addNewQuestion(sectionIndex, questionIndex) {
10610
10589
  this.addQuestionForm(descriptive_question_template, sectionIndex);
10590
+ if (descriptive_question_template?.answers.length) {
10591
+ descriptive_question_template.answers.forEach((element, idx) => {
10592
+ this.addAnswerForm(element, sectionIndex, questionIndex + 1, idx);
10593
+ });
10594
+ }
10595
+ this.updateIndexNumbers();
10611
10596
  this.toastService.getSuccessToast('Question added successfully');
10612
10597
  }
10613
10598
  onQuestionChange(event, sectionIndex, questionIndex) {
@@ -10658,12 +10643,9 @@ class CreateTaskComponent {
10658
10643
  if (question?.answers.length) {
10659
10644
  question.answers.forEach((element, idx) => {
10660
10645
  this.addAnswerForm(element, sectionIndex, questionIndex, idx);
10661
- // if(answerType === 'descriptive'){
10662
- // this.getAnswers(sectionIndex, questionIndex).at(idx).get('answer')?.removeValidators(Validators.required)
10663
- // this.getAnswers(sectionIndex, questionIndex).at(idx).get('answer')?.updateValueAndValidity()
10664
- // }
10665
10646
  });
10666
10647
  }
10648
+ this.updateIndexNumbers();
10667
10649
  }
10668
10650
  selectQuestion(sectionIndex, questionIndex, question) {
10669
10651
  this.selectedQuestion = question;
@@ -10717,11 +10699,11 @@ class CreateTaskComponent {
10717
10699
  });
10718
10700
  }
10719
10701
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateTaskComponent, deps: [{ token: i1.FormBuilder }, { token: TraxService }, { token: i2$1.GlobalStateService }, { token: i3.ToastService }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
10720
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateTaskComponent, selector: "lib-create-task", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\" placeholder=\"Enter Checklist Name\" class=\"plain-input checklist-name mb-5\">\r\n <input [formControl]=\"taskForm.controls.checklistDescription\" type=\"text\" placeholder=\"Enter Checklist Description\" class=\"plain-input checklist-desc\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button (click)=\"onSubmit('configure')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-primary me-5\" >Configure</button>\r\n <button (click)=\"onSubmit('save')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-outline\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <div (click)=\"selectQuestion(i, j, question)\"\r\n [ngClass]=\"question?.get('qno')?.value === selectedQuestion?.get('qno')?.value ? 'question-badge-selected' : ''\"\r\n class=\"question-badge\">\r\n {{question?.get('qname')?.value ?question?.get('qname')?.value : 'Question ' + question?.get('qno')?.value }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <div class=\"question-name\">\r\n Question {{j + 1}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"text\"\r\n [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"number\"\r\n [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div class=\"check-desc\">Trigger an action for each response\r\n to validate it</div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div style=\"white-space: nowrap;\" class=\"check-desc\">\r\n Trigger an action for each\r\n response\r\n to validate it</div>\r\n </div>\r\n <div>\r\n <svg (click)=\"onAnswerDelete(i, j, k)\"\r\n class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end mb-5\">\r\n <svg (click)=\"onQuestionClone(i, j, question)\" class=\"me-8 cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Duplicate\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3385_10578)\">\r\n <path\r\n d=\"M4.16663 12.4993H3.33329C2.89127 12.4993 2.46734 12.3238 2.15478 12.0112C1.84222 11.6986 1.66663 11.2747 1.66663 10.8327V3.33268C1.66663 2.89065 1.84222 2.46673 2.15478 2.15417C2.46734 1.84161 2.89127 1.66602 3.33329 1.66602H10.8333C11.2753 1.66602 11.6992 1.84161 12.0118 2.15417C12.3244 2.46673 12.5 2.89065 12.5 3.33268V4.16602M9.16663 7.49935H16.6666C17.5871 7.49935 18.3333 8.24554 18.3333 9.16602V16.666C18.3333 17.5865 17.5871 18.3327 16.6666 18.3327H9.16663C8.24615 18.3327 7.49996 17.5865 7.49996 16.666V9.16602C7.49996 8.24554 8.24615 7.49935 9.16663 7.49935Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3385_10578\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(getQuestions(i)?.controls?.length ?? 0) > 1\" (click)=\"onQuestionDelete(i, j)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Delete question\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 4.99935H4.16667M4.16667 4.99935H17.5M4.16667 4.99935V16.666C4.16667 17.108 4.34226 17.532 4.65482 17.8445C4.96738 18.1571 5.39131 18.3327 5.83333 18.3327H14.1667C14.6087 18.3327 15.0326 18.1571 15.3452 17.8445C15.6577 17.532 15.8333 17.108 15.8333 16.666V4.99935H4.16667ZM6.66667 4.99935V3.33268C6.66667 2.89065 6.84226 2.46673 7.15482 2.15417C7.46738 1.84161 7.89131 1.66602 8.33333 1.66602H11.6667C12.1087 1.66602 12.5326 1.84161 12.8452 2.15417C13.1577 2.46673 13.3333 2.89065 13.3333 3.33268V4.99935M8.33333 9.16602V14.166M11.6667 9.16602V14.166\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <button (click)=\"addNewQuestion(i)\"\r\n *ngIf=\"j === (getQuestions(i)?.controls?.length ?? 0) - 1\"\r\n class=\"btn btn-outline w-100\">\r\n <svg class=\"mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>Add New Question</span>\r\n\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;background:#f9fafb;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}\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: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
10702
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateTaskComponent, selector: "lib-create-task", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\" placeholder=\"Enter Checklist Name\" class=\"plain-input checklist-name mb-5\">\r\n <input [formControl]=\"taskForm.controls.checklistDescription\" type=\"text\" placeholder=\"Enter Checklist Description\" class=\"plain-input checklist-desc\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button (click)=\"onSubmit('configure')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-primary me-5\" >Configure</button>\r\n <button (click)=\"onSubmit('save')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-outline\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <div (click)=\"selectQuestion(i, j, question)\"\r\n [ngClass]=\"question?.get('qno')?.value === selectedQuestion?.get('qno')?.value ? 'question-badge-selected' : ''\"\r\n class=\"question-badge\">\r\n {{question?.get('qname')?.value ?question?.get('qname')?.value : 'Question ' + question?.get('qno')?.value }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <div class=\"question-name\">\r\n Question {{j + 1}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"text\"\r\n [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"number\"\r\n [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div class=\"check-desc\">Trigger an action for each response\r\n to validate it</div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div style=\"white-space: nowrap;\" class=\"check-desc\">\r\n Trigger an action for each\r\n response\r\n to validate it</div>\r\n </div>\r\n <div>\r\n <svg (click)=\"onAnswerDelete(i, j, k)\"\r\n class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteAnswerReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteAnswerReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end mb-5\">\r\n <svg (click)=\"onQuestionClone(i, j, question)\" class=\"me-8 cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Duplicate\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3385_10578)\">\r\n <path\r\n d=\"M4.16663 12.4993H3.33329C2.89127 12.4993 2.46734 12.3238 2.15478 12.0112C1.84222 11.6986 1.66663 11.2747 1.66663 10.8327V3.33268C1.66663 2.89065 1.84222 2.46673 2.15478 2.15417C2.46734 1.84161 2.89127 1.66602 3.33329 1.66602H10.8333C11.2753 1.66602 11.6992 1.84161 12.0118 2.15417C12.3244 2.46673 12.5 2.89065 12.5 3.33268V4.16602M9.16663 7.49935H16.6666C17.5871 7.49935 18.3333 8.24554 18.3333 9.16602V16.666C18.3333 17.5865 17.5871 18.3327 16.6666 18.3327H9.16663C8.24615 18.3327 7.49996 17.5865 7.49996 16.666V9.16602C7.49996 8.24554 8.24615 7.49935 9.16663 7.49935Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3385_10578\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(getQuestions(i)?.controls?.length ?? 0) > 1\" (click)=\"onQuestionDelete(i, j)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Delete question\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 4.99935H4.16667M4.16667 4.99935H17.5M4.16667 4.99935V16.666C4.16667 17.108 4.34226 17.532 4.65482 17.8445C4.96738 18.1571 5.39131 18.3327 5.83333 18.3327H14.1667C14.6087 18.3327 15.0326 18.1571 15.3452 17.8445C15.6577 17.532 15.8333 17.108 15.8333 16.666V4.99935H4.16667ZM6.66667 4.99935V3.33268C6.66667 2.89065 6.84226 2.46673 7.15482 2.15417C7.46738 1.84161 7.89131 1.66602 8.33333 1.66602H11.6667C12.1087 1.66602 12.5326 1.84161 12.8452 2.15417C13.1577 2.46673 13.3333 2.89065 13.3333 3.33268V4.99935M8.33333 9.16602V14.166M11.6667 9.16602V14.166\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <button (click)=\"addNewQuestion(i, j)\"\r\n *ngIf=\"j === (getQuestions(i)?.controls?.length ?? 0) - 1\"\r\n class=\"btn btn-outline w-100\">\r\n <svg class=\"mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>Add New Question</span>\r\n\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;background:#f9fafb;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}\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: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
10721
10703
  }
10722
10704
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateTaskComponent, decorators: [{
10723
10705
  type: Component,
10724
- args: [{ selector: 'lib-create-task', template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\" placeholder=\"Enter Checklist Name\" class=\"plain-input checklist-name mb-5\">\r\n <input [formControl]=\"taskForm.controls.checklistDescription\" type=\"text\" placeholder=\"Enter Checklist Description\" class=\"plain-input checklist-desc\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button (click)=\"onSubmit('configure')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-primary me-5\" >Configure</button>\r\n <button (click)=\"onSubmit('save')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-outline\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <div (click)=\"selectQuestion(i, j, question)\"\r\n [ngClass]=\"question?.get('qno')?.value === selectedQuestion?.get('qno')?.value ? 'question-badge-selected' : ''\"\r\n class=\"question-badge\">\r\n {{question?.get('qname')?.value ?question?.get('qname')?.value : 'Question ' + question?.get('qno')?.value }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <div class=\"question-name\">\r\n Question {{j + 1}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"text\"\r\n [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"number\"\r\n [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div class=\"check-desc\">Trigger an action for each response\r\n to validate it</div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div style=\"white-space: nowrap;\" class=\"check-desc\">\r\n Trigger an action for each\r\n response\r\n to validate it</div>\r\n </div>\r\n <div>\r\n <svg (click)=\"onAnswerDelete(i, j, k)\"\r\n class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n [src]=\"question.get('questionReferenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end mb-5\">\r\n <svg (click)=\"onQuestionClone(i, j, question)\" class=\"me-8 cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Duplicate\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3385_10578)\">\r\n <path\r\n d=\"M4.16663 12.4993H3.33329C2.89127 12.4993 2.46734 12.3238 2.15478 12.0112C1.84222 11.6986 1.66663 11.2747 1.66663 10.8327V3.33268C1.66663 2.89065 1.84222 2.46673 2.15478 2.15417C2.46734 1.84161 2.89127 1.66602 3.33329 1.66602H10.8333C11.2753 1.66602 11.6992 1.84161 12.0118 2.15417C12.3244 2.46673 12.5 2.89065 12.5 3.33268V4.16602M9.16663 7.49935H16.6666C17.5871 7.49935 18.3333 8.24554 18.3333 9.16602V16.666C18.3333 17.5865 17.5871 18.3327 16.6666 18.3327H9.16663C8.24615 18.3327 7.49996 17.5865 7.49996 16.666V9.16602C7.49996 8.24554 8.24615 7.49935 9.16663 7.49935Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3385_10578\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(getQuestions(i)?.controls?.length ?? 0) > 1\" (click)=\"onQuestionDelete(i, j)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Delete question\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 4.99935H4.16667M4.16667 4.99935H17.5M4.16667 4.99935V16.666C4.16667 17.108 4.34226 17.532 4.65482 17.8445C4.96738 18.1571 5.39131 18.3327 5.83333 18.3327H14.1667C14.6087 18.3327 15.0326 18.1571 15.3452 17.8445C15.6577 17.532 15.8333 17.108 15.8333 16.666V4.99935H4.16667ZM6.66667 4.99935V3.33268C6.66667 2.89065 6.84226 2.46673 7.15482 2.15417C7.46738 1.84161 7.89131 1.66602 8.33333 1.66602H11.6667C12.1087 1.66602 12.5326 1.84161 12.8452 2.15417C13.1577 2.46673 13.3333 2.89065 13.3333 3.33268V4.99935M8.33333 9.16602V14.166M11.6667 9.16602V14.166\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <button (click)=\"addNewQuestion(i)\"\r\n *ngIf=\"j === (getQuestions(i)?.controls?.length ?? 0) - 1\"\r\n class=\"btn btn-outline w-100\">\r\n <svg class=\"mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>Add New Question</span>\r\n\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;background:#f9fafb;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}\n"] }]
10706
+ args: [{ selector: 'lib-create-task', template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\" placeholder=\"Enter Checklist Name\" class=\"plain-input checklist-name mb-5\">\r\n <input [formControl]=\"taskForm.controls.checklistDescription\" type=\"text\" placeholder=\"Enter Checklist Description\" class=\"plain-input checklist-desc\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" >\r\n <button (click)=\"onSubmit('configure')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-primary me-5\" >Configure</button>\r\n <button (click)=\"onSubmit('save')\" [disabled]=\"taskForm.invalid\" class=\"btn btn-outline\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <div (click)=\"selectQuestion(i, j, question)\"\r\n [ngClass]=\"question?.get('qno')?.value === selectedQuestion?.get('qno')?.value ? 'question-badge-selected' : ''\"\r\n class=\"question-badge\">\r\n {{question?.get('qname')?.value ?question?.get('qname')?.value : 'Question ' + question?.get('qno')?.value }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <div class=\"question-name\">\r\n Question {{j + 1}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"text\"\r\n [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\" value=\"number\"\r\n [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div class=\"check-desc\">Trigger an action for each response\r\n to validate it</div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"mb-5 ans-header\">Answer Options</div>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Enter answer here\">\r\n <!-- <button\r\n (click)=\"answer.get('showLinked')?.setValue(!answer.get('showLinked')?.value); answer.get('showLinked')?.value ? answer.get('validation')?.setValue(false) : null;\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg _ngcontent-ng-c1491044170=\"\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n class=\"imgAdd ng-star-inserted\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </button> -->\r\n <!-- <button\r\n (click)=\"answer.get('sopFlag')?.setValue(!answer.get('sopFlag')?.value)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\"\r\n [attr.fill]=\"answer.get('sopFlag')?.value ? 'red' : 'none'\">\r\n <path\r\n d=\"M3.33203 12.5001C3.33203 12.5001 4.16536 11.6667 6.66536 11.6667C9.16536 11.6667 10.832 13.3334 13.332 13.3334C15.832 13.3334 16.6654 12.5001 16.6654 12.5001V2.50008C16.6654 2.50008 15.832 3.33341 13.332 3.33341C10.832 3.33341 9.16536 1.66675 6.66536 1.66675C4.16536 1.66675 3.33203 2.50008 3.33203 2.50008V12.5001ZM3.33203 12.5001V18.3334\"\r\n [attr.stroke]=\"answer.get('sopFlag')?.value ? 'red' : '#667085'\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button> -->\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n <!-- <div *ngIf=\"!answer.get('showLinked')?.value\" class=\"col-6\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div style=\"padding-left: unset;\" class=\"form-check\">\r\n <input formControlName=\"validation\"\r\n (change)=\"onValidateResponseChange($event, i, j, k)\"\r\n class=\"form-check-input c-checkbox\" type=\"checkbox\"\r\n [id]=\"'validate_response'+i+j+k\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'validate_response'+i+j+k\">\r\n Validate response\r\n </label>\r\n <div style=\"white-space: nowrap;\" class=\"check-desc\">\r\n Trigger an action for each\r\n response\r\n to validate it</div>\r\n </div>\r\n <div>\r\n <svg (click)=\"onAnswerDelete(i, j, k)\"\r\n class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n\r\n </div> -->\r\n <div *ngIf=\"answer.get('showLinked')?.value && !answer.get('validation')?.value\"\r\n class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-3\">\r\n <span\r\n class=\"check-label d-flex align-items-center h-100\">Linked\r\n Question</span>\r\n </div>\r\n <div class=\"col-9\">\r\n <select formControlName=\"linkedQuestion\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let question of getQuestions(i).controls; let l = index\"\r\n [ngValue]=\"question.get('qno')?.value\">\r\n {{'Question ' + l + 1}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container\r\n *ngIf=\"answer.get('validation')?.value && !answer.get('showLinked')?.value\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between mb-5\">\r\n <span class=\"check-label\">If the response is this,\r\n then</span>\r\n <span>\r\n <select formControlName=\"validationType\"\r\n class=\"form-select \">\r\n <option\r\n *ngFor=\"let validation of validationTypes\"\r\n [value]=\"validation.value\">\r\n {{validation.label}}</option>\r\n </select>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Descriptive Answer'\"\r\n class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"answer.get('validationType')?.value === 'Capture Image'\"\r\n class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j + k\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j + k\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteAnswerReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div style=\"position: relative;\">\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n (click)=\"onDeleteAnswerReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"answer.get('referenceImage')?.value\"\r\n [src]=\"answer.get('referenceImage')?.value\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'answer_validation_reference'+i+j+k\"\r\n (change)=\"uploadFile($event, i, j, k)\"\r\n style=\"display: none;\" type=\"file\"\r\n accept=\"image/png, image/jpeg\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <label [for]=\"'answer_validation_reference'+i+j+k\"\r\n class=\"add-reference-btn \">\r\n <svg *ngIf=\"!answer.get('referenceImage')?.value\"\r\n class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"answer.get('referenceImage')?.value\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\"\r\n fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span\r\n *ngIf=\"!answer.get('referenceImage')?.value\">Add\r\n Reference\r\n Image</span>\r\n <span\r\n *ngIf=\"answer.get('referenceImage')?.value\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <div>\r\n <div class=\"form-check form-switch\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input\" type=\"checkbox\"\r\n role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <div class=\"d-flex flex-column mb-5\">\r\n <textarea formControlName=\"qname\" placeholder=\"Enter question here\"\r\n class=\"form-control\"></textarea>\r\n <ng-container\r\n *ngIf=\"question.get('qname')?.invalid && question.get('qname')?.touched\">\r\n <div *ngIf=\"question.get('qname')?.hasError('required')\"\r\n class=\"text-danger mt-2\">* Question is required</div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let image of question.get('questionReferenceImage')?.value; let k = index\" style=\"position: relative;\">\r\n <svg *ngIf=\"image\"\r\n (click)=\"onDeleteQuestionReferenceImage(i, j, k)\"\r\n style=\"position: absolute; right: 10px; top: 10px; cursor: pointer;\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168\"\r\n stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n\r\n <img class=\"mb-5\" height=\"300px\"\r\n style=\"width: 100%; object-fit: contain; background: white; border-radius: 5px;\"\r\n *ngIf=\"image\"\r\n [src]=\"image\">\r\n </div>\r\n\r\n\r\n <input [id]=\"'question_reference'+i+j\" (change)=\"uploadFile($event, i, j)\"\r\n style=\"display: none;\" type=\"file\" accept=\"image/png, image/jpeg\">\r\n <label [for]=\"'question_reference'+i+j\" class=\"add-reference-btn mb-5\">\r\n <svg *ngIf=\"!question.get('questionReferenceImage')?.value?.length\" class=\"mr-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10 4.16797V15.8346M4.16669 10.0013H15.8334\" stroke=\"#009BF3\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"question.get('questionReferenceImage')?.value?.length\"\r\n xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-2\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4082_3122)\">\r\n <path\r\n d=\"M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4082_3122\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\"\r\n transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span *ngIf=\"!question.get('questionReferenceImage')?.value?.length\">Add Reference\r\n Image</span>\r\n <span *ngIf=\"question.get('questionReferenceImage')?.value?.length\">Reupload\r\n Image</span>\r\n\r\n </label>\r\n\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n <ng-container *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end mb-5\">\r\n <svg (click)=\"onQuestionClone(i, j, question)\" class=\"me-8 cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Duplicate\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3385_10578)\">\r\n <path\r\n d=\"M4.16663 12.4993H3.33329C2.89127 12.4993 2.46734 12.3238 2.15478 12.0112C1.84222 11.6986 1.66663 11.2747 1.66663 10.8327V3.33268C1.66663 2.89065 1.84222 2.46673 2.15478 2.15417C2.46734 1.84161 2.89127 1.66602 3.33329 1.66602H10.8333C11.2753 1.66602 11.6992 1.84161 12.0118 2.15417C12.3244 2.46673 12.5 2.89065 12.5 3.33268V4.16602M9.16663 7.49935H16.6666C17.5871 7.49935 18.3333 8.24554 18.3333 9.16602V16.666C18.3333 17.5865 17.5871 18.3327 16.6666 18.3327H9.16663C8.24615 18.3327 7.49996 17.5865 7.49996 16.666V9.16602C7.49996 8.24554 8.24615 7.49935 9.16663 7.49935Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3385_10578\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngIf=\"(getQuestions(i)?.controls?.length ?? 0) > 1\" (click)=\"onQuestionDelete(i, j)\" class=\"cursor-pointer\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n matTooltip=\"Delete question\" matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.5 4.99935H4.16667M4.16667 4.99935H17.5M4.16667 4.99935V16.666C4.16667 17.108 4.34226 17.532 4.65482 17.8445C4.96738 18.1571 5.39131 18.3327 5.83333 18.3327H14.1667C14.6087 18.3327 15.0326 18.1571 15.3452 17.8445C15.6577 17.532 15.8333 17.108 15.8333 16.666V4.99935H4.16667ZM6.66667 4.99935V3.33268C6.66667 2.89065 6.84226 2.46673 7.15482 2.15417C7.46738 1.84161 7.89131 1.66602 8.33333 1.66602H11.6667C12.1087 1.66602 12.5326 1.84161 12.8452 2.15417C13.1577 2.46673 13.3333 2.89065 13.3333 3.33268V4.99935M8.33333 9.16602V14.166M11.6667 9.16602V14.166\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n <button (click)=\"addNewQuestion(i, j)\"\r\n *ngIf=\"j === (getQuestions(i)?.controls?.length ?? 0) - 1\"\r\n class=\"btn btn-outline w-100\">\r\n <svg class=\"mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <span>Add New Question</span>\r\n\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;background:#f9fafb;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}\n"] }]
10725
10707
  }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: TraxService }, { type: i2$1.GlobalStateService }, { type: i3.ToastService }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.PageInfoService }] });
10726
10708
 
10727
10709
  dayjs.extend(utc);
@@ -11239,10 +11221,10 @@ class ActivityLogComponent {
11239
11221
  activityLogNoData = false;
11240
11222
  itemsPerPage = 10;
11241
11223
  currentPage = 1;
11224
+ totalItems = 0;
11242
11225
  sortColumName = '';
11243
11226
  sortBy = '';
11244
11227
  sortDirection = '';
11245
- totalItems = 0;
11246
11228
  paginationSizes = [];
11247
11229
  pageSize = 10;
11248
11230
  activityLog = [];
@@ -11278,19 +11260,22 @@ class ActivityLogComponent {
11278
11260
  this.activityLogLoading = true;
11279
11261
  this.activityLogNoData = true;
11280
11262
  const requestData = {
11281
- fromDate: this.headerData.date.startDate,
11282
- toDate: this.headerData.date.endDate,
11263
+ // fromDate: this.headerData.date.startDate,
11264
+ // toDate: this.headerData.date.endDate,
11283
11265
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
11284
11266
  clientId: this.headerData.client,
11267
+ limit: this.itemsPerPage,
11268
+ offset: this.currentPage,
11285
11269
  };
11286
11270
  this.TraxService.getActivityLog(requestData)
11287
11271
  .pipe(takeUntil(this.destroy$))
11288
11272
  .subscribe((response) => {
11289
11273
  this.activityLogLoading = false;
11290
11274
  if (response?.code === 200 && response?.status === "success") {
11291
- this.activityLog = response.data.activityLog || [];
11292
- this.totalItems = response.data.totalCount;
11293
- // this.setPaginationSizes()
11275
+ this.activityLog = response.data[0]?.activityLogData || [];
11276
+ // this.totalItems = response.data.totalCount
11277
+ this.totalItems = response.data[0]?.count[0]?.total || 0;
11278
+ this.setPaginationSizes();
11294
11279
  this.activityLogLoading = false;
11295
11280
  this.activityLogNoData = false;
11296
11281
  }
@@ -11308,12 +11293,32 @@ class ActivityLogComponent {
11308
11293
  this.changeDetector.detectChanges();
11309
11294
  });
11310
11295
  }
11296
+ onPageSizeChange(pageSize) {
11297
+ this.currentPage = 1;
11298
+ this.itemsPerPage = pageSize;
11299
+ this.pageSize = pageSize;
11300
+ this.changeDetector.detectChanges();
11301
+ this.getActivityLog();
11302
+ }
11303
+ onPageChange(pageOffset) {
11304
+ this.currentPage = pageOffset;
11305
+ this.getActivityLog();
11306
+ }
11307
+ setPaginationSizes() {
11308
+ if (this.totalItems > 10) {
11309
+ this.paginationSizes = [10, 20, 30];
11310
+ }
11311
+ else {
11312
+ this.paginationSizes = [this.totalItems];
11313
+ this.pageSize = this.totalItems;
11314
+ }
11315
+ }
11311
11316
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityLogComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }, { token: TraxService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11312
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityLogComponent, selector: "lib-activity-log", ngImport: i0, template: "<div class=\"col-md-12\">\r\n <div class=\"row cardscroll\">\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 !== 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.status === 'lapsed' ? '#F04438' : '#12B76A'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName }}\r\n <span class=\"logtextsub mx-1\">{{ log.status | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checklistName }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt }}</span>\r\n </div>\r\n <div *ngIf=\"log.status === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 === 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.status === 'submitted' ? '#12B76A' : '#F04438'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName }}\r\n <span class=\"logtextsub mx-1\">{{ log.status | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checklistName }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt }}</span>\r\n </div>\r\n <div *ngIf=\"log.status === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"activityLogLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"activityLogNoData && !activityLogLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".timeline-label{position:unset}.logtextmain{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.logtextsub{color:var(--Gray-400, #98A2B3);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.logview{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.cardscroll{overflow-y:scroll;max-height:275px}\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: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }] });
11317
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityLogComponent, selector: "lib-activity-log", ngImport: i0, template: "<div class=\"col-md-12\">\r\n <div *ngIf=\"!activityLogLoading && !activityLogNoData\" class=\"row cardscroll\">\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 !== 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.action === 'lapsed' ? '#F04438' : '#12B76A'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName || \"--\" }}\r\n <span class=\"logtextsub mx-1\">{{ log.action | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checkListName || \"--\" }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt || \"--\" }}</span>\r\n </div>\r\n <div *ngIf=\"log.action === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 === 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.action === 'submitted' ? '#12B76A' : '#F04438'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName || \"--\" }}\r\n <span class=\"logtextsub mx-1\">{{ log.action | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checkListName || \"--\" }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt || \"--\" }}</span>\r\n </div>\r\n <div *ngIf=\"log.action === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!activityLogLoading && !activityLogNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n \r\n </div>\r\n <ng-container *ngIf=\"activityLogLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"activityLogNoData && !activityLogLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [".timeline-label{position:unset}.logtextmain{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.logtextsub{color:var(--Gray-400, #98A2B3);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.logview{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.cardscroll{overflow-y:scroll;max-height:275px}\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: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }] });
11313
11318
  }
11314
11319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityLogComponent, decorators: [{
11315
11320
  type: Component,
11316
- args: [{ selector: 'lib-activity-log', template: "<div class=\"col-md-12\">\r\n <div class=\"row cardscroll\">\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 !== 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.status === 'lapsed' ? '#F04438' : '#12B76A'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName }}\r\n <span class=\"logtextsub mx-1\">{{ log.status | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checklistName }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt }}</span>\r\n </div>\r\n <div *ngIf=\"log.status === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 === 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.status === 'submitted' ? '#12B76A' : '#F04438'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName }}\r\n <span class=\"logtextsub mx-1\">{{ log.status | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checklistName }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt }}</span>\r\n </div>\r\n <div *ngIf=\"log.status === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"activityLogLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"activityLogNoData && !activityLogLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".timeline-label{position:unset}.logtextmain{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.logtextsub{color:var(--Gray-400, #98A2B3);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.logview{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.cardscroll{overflow-y:scroll;max-height:275px}\n"] }]
11321
+ args: [{ selector: 'lib-activity-log', template: "<div class=\"col-md-12\">\r\n <div *ngIf=\"!activityLogLoading && !activityLogNoData\" class=\"row cardscroll\">\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 !== 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.action === 'lapsed' ? '#F04438' : '#12B76A'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName || \"--\" }}\r\n <span class=\"logtextsub mx-1\">{{ log.action | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checkListName || \"--\" }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt || \"--\" }}</span>\r\n </div>\r\n <div *ngIf=\"log.action === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"timeline-label\">\r\n <div *ngFor=\"let log of activityLog; let i = index\" class=\"timeline-item mb-6\"\r\n [ngClass]=\"{'d-none': i % 2 === 0}\">\r\n <div class=\"timeline-badge mx-1\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\"\r\n fill=\"none\">\r\n <circle cx=\"6.5\" cy=\"7\" r=\"5\"\r\n [attr.stroke]=\"log.action === 'submitted' ? '#12B76A' : '#F04438'\"\r\n stroke-width=\"3\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"logtextmain\">\r\n {{ log.storeName || \"--\" }}\r\n <span class=\"logtextsub mx-1\">{{ log.action | titlecase }}</span>\r\n <span class=\"logtextmain mx-1\">{{ log.checkListName || \"--\" }}</span>\r\n <span class=\"logtextsub mx-1\">at {{ log.createdAt || \"--\" }}</span>\r\n </div>\r\n <div *ngIf=\"log.action === 'submitted'\" class=\"mx-8 logview mx-16\">View</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!activityLogLoading && !activityLogNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n \r\n </div>\r\n <ng-container *ngIf=\"activityLogLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"activityLogNoData && !activityLogLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Performance Table\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [".timeline-label{position:unset}.logtextmain{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.logtextsub{color:var(--Gray-400, #98A2B3);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.logview{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.cardscroll{overflow-y:scroll;max-height:275px}\n"] }]
11317
11322
  }], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }, { type: TraxService }, { type: i0.ChangeDetectorRef }] });
11318
11323
 
11319
11324
  class ActionCentreComponent {
@@ -11325,17 +11330,6 @@ class ActionCentreComponent {
11325
11330
  destroy$ = new Subject();
11326
11331
  searchInput = "";
11327
11332
  form;
11328
- checklistselectControl;
11329
- checklistDropdown = [
11330
- { _id: 'All', checkListName: 'All' },
11331
- { _id: 'Checklist', checkListName: 'Checklist' },
11332
- { _id: 'Task', checkListName: 'Task' },
11333
- // Add more static checklist items as needed
11334
- ];
11335
- filterByRoles;
11336
- dataObject = [
11337
- { Description: 'Priority', Issues: [{ text: "High", id: 'high' }, { text: "Medium", id: 'medium' }, { text: "Low", id: "low" }] },
11338
- ];
11339
11333
  headerData;
11340
11334
  overallCardsData = {};
11341
11335
  cardDataLoading = true;
@@ -11358,22 +11352,47 @@ class ActionCentreComponent {
11358
11352
  approvalInprogressNoData = false;
11359
11353
  approvedLoading = true;
11360
11354
  approvedNoData = false;
11355
+ priorityType = [];
11356
+ selectedlistselectControl;
11357
+ selectedStatus;
11358
+ statusselectControl = [
11359
+ { _id: 'all', label: 'All' },
11360
+ { _id: 'checklist', label: 'Checklist' },
11361
+ { _id: 'task', label: 'Task' },
11362
+ ];
11363
+ dataObject = [
11364
+ {
11365
+ Description: 'Priority',
11366
+ Issues: [
11367
+ { text: 'High', id: 'high' },
11368
+ { text: 'Medium', id: 'medium' },
11369
+ { text: 'Low', id: 'low' },
11370
+ ],
11371
+ },
11372
+ ];
11373
+ searchValue;
11374
+ limit;
11375
+ offset;
11376
+ isTaskSelected = false;
11361
11377
  constructor(fb, gs, pageInfo, TraxService, changeDetector) {
11362
11378
  this.fb = fb;
11363
11379
  this.gs = gs;
11364
11380
  this.pageInfo = pageInfo;
11365
11381
  this.TraxService = TraxService;
11366
11382
  this.changeDetector = changeDetector;
11367
- this.checklistselectControl = new FormControl('All');
11368
- this.form = this.fb.group({
11369
- checklistselectControl: this.checklistselectControl
11370
- });
11371
11383
  }
11372
11384
  ngOnDestroy() {
11373
11385
  this.destroy$.next(true);
11374
11386
  this.destroy$.complete();
11375
11387
  }
11376
11388
  ngOnInit() {
11389
+ this.selectedlistselectControl = new FormControl('all');
11390
+ this.form = this.fb.group({
11391
+ selectedlistselectControl: this.selectedlistselectControl
11392
+ });
11393
+ this.selectedlistselectControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
11394
+ this.onValueChangeStatusSelect(value);
11395
+ });
11377
11396
  this.gs.dataRangeValue
11378
11397
  .pipe(takeUntil(this.destroy$), debounceTime(300))
11379
11398
  .subscribe((data) => {
@@ -11381,8 +11400,6 @@ class ActionCentreComponent {
11381
11400
  this.setPageData();
11382
11401
  this.getOverallActionCenterData();
11383
11402
  this.getApprovalOpenData();
11384
- // this.getApprovalInprogressData();
11385
- // this.getApprovedData()
11386
11403
  });
11387
11404
  }
11388
11405
  setPageData() {
@@ -11431,18 +11448,13 @@ class ActionCentreComponent {
11431
11448
  this.approvedLoading = true;
11432
11449
  this.approvedNoData = true;
11433
11450
  const requestData = {
11434
- date: "2024-12-02",
11435
11451
  fromDate: this.headerData.date.startDate,
11436
11452
  toDate: this.headerData.date.endDate,
11437
11453
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
11438
11454
  clientId: this.headerData.client,
11439
- // limit: this.itemsPerPage,
11440
- // offset: this.currentPage - 1,
11441
- sortBy: this.sortDirection,
11442
- sortColumnName: this.sortColumName,
11443
11455
  searchValue: this.searchInput,
11444
- filter: "",
11445
- type: 'all'
11456
+ filter: this.priorityType,
11457
+ type: this.selectedlistselectControl.value
11446
11458
  };
11447
11459
  this.TraxService.getApprovalData(requestData)
11448
11460
  .pipe(takeUntil(this.destroy$))
@@ -11600,11 +11612,21 @@ class ActionCentreComponent {
11600
11612
  // this.changeDetector.detectChanges()
11601
11613
  // });
11602
11614
  // }
11603
- onValueChangeChecklist(event) {
11604
- // Handle the value change event as needed
11605
- console.log('Selected checklist:', event);
11615
+ onValueChangeStatusSelect(event) {
11616
+ this.searchValue = "",
11617
+ this.selectedStatus = this.statusselectControl.find(item => item._id === event);
11618
+ if (this.selectedStatus) {
11619
+ this.isTaskSelected = this.selectedStatus._id === 'task';
11620
+ this.changeDetector.detectChanges();
11621
+ this.getApprovalOpenData();
11622
+ }
11606
11623
  }
11607
11624
  searchField() {
11625
+ this.headerData.search = this.searchInput;
11626
+ // this.headerData.export = false;
11627
+ this.currentPage = 1;
11628
+ this.pageSize = 10;
11629
+ this.getApprovalOpenData();
11608
11630
  }
11609
11631
  setPaginationSizes() {
11610
11632
  if (this.totalItems > 10) {
@@ -11612,27 +11634,28 @@ class ActionCentreComponent {
11612
11634
  }
11613
11635
  else {
11614
11636
  this.paginationSizes = [this.totalItems];
11615
- this.pageSize = this.totalItems; // Just one option if less than 10
11637
+ this.pageSize = this.totalItems;
11616
11638
  }
11617
11639
  }
11618
11640
  applyFilters(event) {
11619
11641
  if (event?.length) {
11620
11642
  event.forEach((element) => {
11621
- if (element.Description === "Roles") {
11622
- this.filterByRoles = element.Issues.map((val) => val?.id);
11643
+ if (element.Description === 'Priority') {
11644
+ this.priorityType = element.Issues.map((val) => val.id);
11623
11645
  }
11624
- // if (element.Description === "Status") {
11625
- // this.filterByStatus = element.Issues.map((val: any) => val?.id);
11626
- // }
11627
11646
  });
11628
11647
  }
11648
+ else {
11649
+ this.priorityType = [];
11650
+ }
11651
+ this.getApprovalOpenData();
11629
11652
  }
11630
11653
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCentreComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }, { token: TraxService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11631
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCentreComponent, selector: "lib-action-centre", ngImport: i0, template: "<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.checklistApproval?.count !==null ?\r\n overallCardsData.checklistApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> \r\n <span class=\"actiontext mx-5 mt-3\">Checklist waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.taskApproval?.count !==null ?\r\n overallCardsData.taskApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> <span class=\"actiontext mx-5 mt-3\">Task waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row m-0 my-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Approval</span>\r\n <span class=\"text-sub mb-2\">An Summary of all the checklists awaiting approval\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-4 mt-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control w-400px ps-14 mt-1 me-3\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <lib-filters class=\"me-3 mt-1\" [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <form class=\"mt-1 borderless-select\" [formGroup]=\"form\">\r\n <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <!-- open card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Open <span *ngIf=\"OpenApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\"> {{OpenApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvalOpenLoading && !approvalOpenNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let open of OpenApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ open.checkListName || '--' }}\r\n <span *ngIf=\"open.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ open.checkListType || '--' }}</span>\r\n <span *ngIf=\"open.checkListType && open.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ open.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"open?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': open.priorityType === 'high',\r\n 'badge-light-blue': open.priorityType === 'medium',\r\n 'badge-light-warning': open.priorityType === 'low'\r\n }\">\r\n {{ open.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.storeCount !==null ?\r\n open.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ open.scheduleRepeatedType ?\r\n open.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ open.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ open.approveCount !==null ?\r\n open.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalOpenLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalOpenNoData && !approvalOpenLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Open Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Inprogress \r\n <span *ngIf=\"InprogressApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\">{{InprogressApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvalInprogressLoading && !approvalInprogressNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let inprogress of InprogressApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ inprogress.checkListName || '--'}}\r\n <span *ngIf=\"inprogress.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ inprogress.checkListType || '--' }}</span>\r\n <span *ngIf=\"inprogress.checkListType && inprogress.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ inprogress.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"inprogress?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': inprogress.priorityType === 'high',\r\n 'badge-light-blue': inprogress.priorityType === 'medium',\r\n 'badge-light-warning': inprogress.priorityType === 'low'\r\n }\">\r\n {{ inprogress.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.storeCount !==null ?\r\n inprogress.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ inprogress.scheduleRepeatedType ?\r\n inprogress.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ inprogress.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ inprogress.approveCount !==null ?\r\n inprogress.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalInprogressLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalInprogressNoData && !approvalInprogressLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Inprogress Checklilst\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- inprogress card end -->\r\n <!-- Approved card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Approved <span *ngIf=\"DoneApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\"> {{DoneApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvedLoading && !approvedNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let done of DoneApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ done.checkListName || '--' }}\r\n <span *ngIf=\"done.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ done.checkListType || '--' }}</span>\r\n <span *ngIf=\"done.checkListType && done.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ done.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div>\r\n <span *ngIf=\"done.priorityType\" class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': done.priorityType === 'high',\r\n 'badge-light-blue': done.priorityType === 'medium',\r\n 'badge-light-warning': done.priorityType === 'low'\r\n }\">\r\n {{ done.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.storeCount !==null ?\r\n done.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ done.scheduleRepeatedType ?\r\n done.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ done.publishDate | date: \"YYYY-MM-dd\"}}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ done.approveCount !==null ?\r\n done.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvedLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvedNoData && !approvedLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Approved Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- Approved card end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3\">\r\n <ng-container>\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Activity Log<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-activity-log></lib-activity-log>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".actioncard{display:flex;padding:8px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.actioncount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.actiontext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.approvalcard{border-radius:6px;background:var(--Gray-50, #F9FAFB);flex-direction:column;align-items:center;flex:1 0 0;align-self:stretch}.approvalheader{display:flex;padding:16px 15px;justify-content:space-between;align-items:center;align-self:stretch;border-radius:6px 6px 0 0;background:var(--Gray-100, #F2F4F7)}.approvalbody{border-radius:8px;border:1px solid var(--Primary-25, #F6FCFF);background:var(--White, #FFF);box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;padding:12px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch}.cate-text{color:#626f86;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cate-sub{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px;mix-blend-mode:multiply}.card-label{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.cardsubtext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cardscroll{overflow-y:scroll;max-height:275px}.badge-light-blue{border-radius:16px;background:var(--Blue-50, #EFF8FF);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:4px;color:var(--Blue-700, #175CD3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badge-light-violet{border-radius:16px;background:var(--Purple-50, #F4F3FF);padding:2px 8px;justify-content:center;align-items:center;color:var(--Purple-700, #5925DC);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.headtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.card .card-header{padding:0px .5rem}\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.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i6.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i6.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i6.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i6.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i6.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: ActivityLogComponent, selector: "lib-activity-log" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
11654
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCentreComponent, selector: "lib-action-centre", ngImport: i0, template: "<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.checklistApproval?.count !==null ?\r\n overallCardsData.checklistApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span>\r\n <span class=\"actiontext mx-5 mt-3\">Checklist waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.taskApproval?.count !==null ?\r\n overallCardsData.taskApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> <span class=\"actiontext mx-5 mt-3\">Task waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row m-0 my-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Approval</span>\r\n <span class=\"text-sub mb-2\">An Summary of all the checklists awaiting approval\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-4 mt-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control w-400px ps-14 mt-1 me-3\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <lib-filters *ngIf=\"isTaskSelected\" class=\"me-3 mt-1\" [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <form class=\"mt-1 borderless-select\" [formGroup]=\"form\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\" [nameField]=\"'label'\"\r\n [data]=\"statusselectControl\" class=\"w-200px\" (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <!-- open card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Open <span *ngIf=\"OpenApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\"> {{OpenApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvalOpenLoading && !approvalOpenNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let open of OpenApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ open.checkListName || '--' }}\r\n <span *ngIf=\"open.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ open.checkListType || '--' }}</span>\r\n <span *ngIf=\"open.checkListType && open.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ open.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"open?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': open.priorityType === 'high',\r\n 'badge-light-blue': open.priorityType === 'medium',\r\n 'badge-light-warning': open.priorityType === 'low'\r\n }\">\r\n {{ open.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.storeCount !==null ?\r\n open.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ open.scheduleRepeatedType ?\r\n open.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ open.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ open.approveCount !==null ?\r\n open.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalOpenLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalOpenNoData && !approvalOpenLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Open Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Inprogress\r\n <span *ngIf=\"InprogressApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\">{{InprogressApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvalInprogressLoading && !approvalInprogressNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let inprogress of InprogressApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ inprogress.checkListName || '--'}}\r\n <span *ngIf=\"inprogress.taskType === 'redo'\"\r\n class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ inprogress.checkListType || '--' }}</span>\r\n <span *ngIf=\"inprogress.checkListType && inprogress.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ inprogress.checkListType || '--'\r\n }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"inprogress?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': inprogress.priorityType === 'high',\r\n 'badge-light-blue': inprogress.priorityType === 'medium',\r\n 'badge-light-warning': inprogress.priorityType === 'low'\r\n }\">\r\n {{ inprogress.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.storeCount !==null ?\r\n inprogress.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ inprogress.scheduleRepeatedType ?\r\n inprogress.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ inprogress.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ inprogress.approveCount !==null ?\r\n inprogress.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalInprogressLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalInprogressNoData && !approvalInprogressLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Inprogress Checklilst\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- inprogress card end -->\r\n <!-- Approved card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Approved <span *ngIf=\"DoneApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\"> {{DoneApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvedLoading && !approvedNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let done of DoneApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ done.checkListName || '--' }}\r\n <span *ngIf=\"done.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ done.checkListType || '--' }}</span>\r\n <span *ngIf=\"done.checkListType && done.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ done.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div>\r\n <span *ngIf=\"done.priorityType\" class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': done.priorityType === 'high',\r\n 'badge-light-blue': done.priorityType === 'medium',\r\n 'badge-light-warning': done.priorityType === 'low'\r\n }\">\r\n {{ done.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.storeCount !==null ?\r\n done.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ done.scheduleRepeatedType ?\r\n done.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ done.publishDate | date: \"YYYY-MM-dd\"}}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ done.approveCount !==null ?\r\n done.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvedLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvedNoData && !approvedLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Approved Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- Approved card end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3\">\r\n <ng-container>\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Activity Log<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-activity-log></lib-activity-log>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".actioncard{display:flex;padding:8px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.actioncount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.actiontext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.approvalcard{border-radius:6px;background:var(--Gray-50, #F9FAFB);flex-direction:column;align-items:center;flex:1 0 0;align-self:stretch}.approvalheader{display:flex;padding:16px 15px;justify-content:space-between;align-items:center;align-self:stretch;border-radius:6px 6px 0 0;background:var(--Gray-100, #F2F4F7)}.approvalbody{border-radius:8px;border:1px solid var(--Primary-25, #F6FCFF);background:var(--White, #FFF);box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;padding:12px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch}.cate-text{color:#626f86;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cate-sub{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px;mix-blend-mode:multiply}.card-label{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.cardsubtext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cardscroll{overflow-y:scroll;max-height:275px}.badge-light-blue{border-radius:16px;background:var(--Blue-50, #EFF8FF);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:4px;color:var(--Blue-700, #175CD3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badge-light-violet{border-radius:16px;background:var(--Purple-50, #F4F3FF);padding:2px 8px;justify-content:center;align-items:center;color:var(--Purple-700, #5925DC);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.headtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.card .card-header{padding:0px .5rem}\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.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i6.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i6.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i6.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i6.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i6.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: ActivityLogComponent, selector: "lib-activity-log" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
11632
11655
  }
11633
11656
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCentreComponent, decorators: [{
11634
11657
  type: Component,
11635
- args: [{ selector: 'lib-action-centre', template: "<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.checklistApproval?.count !==null ?\r\n overallCardsData.checklistApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> \r\n <span class=\"actiontext mx-5 mt-3\">Checklist waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.taskApproval?.count !==null ?\r\n overallCardsData.taskApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> <span class=\"actiontext mx-5 mt-3\">Task waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row m-0 my-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Approval</span>\r\n <span class=\"text-sub mb-2\">An Summary of all the checklists awaiting approval\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-4 mt-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control w-400px ps-14 mt-1 me-3\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <lib-filters class=\"me-3 mt-1\" [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <form class=\"mt-1 borderless-select\" [formGroup]=\"form\">\r\n <lib-reactive-select [formControl]=\"checklistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checklistDropdown\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\"\r\n (valueChange)=\"onValueChangeChecklist($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.checkListName }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <!-- open card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Open <span *ngIf=\"OpenApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\"> {{OpenApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvalOpenLoading && !approvalOpenNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let open of OpenApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ open.checkListName || '--' }}\r\n <span *ngIf=\"open.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ open.checkListType || '--' }}</span>\r\n <span *ngIf=\"open.checkListType && open.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ open.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"open?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': open.priorityType === 'high',\r\n 'badge-light-blue': open.priorityType === 'medium',\r\n 'badge-light-warning': open.priorityType === 'low'\r\n }\">\r\n {{ open.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.storeCount !==null ?\r\n open.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ open.scheduleRepeatedType ?\r\n open.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ open.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ open.approveCount !==null ?\r\n open.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalOpenLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalOpenNoData && !approvalOpenLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Open Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Inprogress \r\n <span *ngIf=\"InprogressApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\">{{InprogressApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvalInprogressLoading && !approvalInprogressNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let inprogress of InprogressApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ inprogress.checkListName || '--'}}\r\n <span *ngIf=\"inprogress.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ inprogress.checkListType || '--' }}</span>\r\n <span *ngIf=\"inprogress.checkListType && inprogress.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ inprogress.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"inprogress?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': inprogress.priorityType === 'high',\r\n 'badge-light-blue': inprogress.priorityType === 'medium',\r\n 'badge-light-warning': inprogress.priorityType === 'low'\r\n }\">\r\n {{ inprogress.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.storeCount !==null ?\r\n inprogress.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ inprogress.scheduleRepeatedType ?\r\n inprogress.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ inprogress.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ inprogress.approveCount !==null ?\r\n inprogress.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalInprogressLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalInprogressNoData && !approvalInprogressLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Inprogress Checklilst\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- inprogress card end -->\r\n <!-- Approved card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Approved <span *ngIf=\"DoneApprovalListData.length\" class=\"cate-sub badge badge-light-default mx-2\"> {{DoneApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!approvedLoading && !approvedNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let done of DoneApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ done.checkListName || '--' }}\r\n <span *ngIf=\"done.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ done.checkListType || '--' }}</span>\r\n <span *ngIf=\"done.checkListType && done.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ done.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div>\r\n <span *ngIf=\"done.priorityType\" class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': done.priorityType === 'high',\r\n 'badge-light-blue': done.priorityType === 'medium',\r\n 'badge-light-warning': done.priorityType === 'low'\r\n }\">\r\n {{ done.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.storeCount !==null ?\r\n done.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ done.scheduleRepeatedType ?\r\n done.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ done.publishDate | date: \"YYYY-MM-dd\"}}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ done.approveCount !==null ?\r\n done.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvedLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvedNoData && !approvedLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Approved Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- Approved card end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3\">\r\n <ng-container>\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Activity Log<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-activity-log></lib-activity-log>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".actioncard{display:flex;padding:8px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.actioncount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.actiontext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.approvalcard{border-radius:6px;background:var(--Gray-50, #F9FAFB);flex-direction:column;align-items:center;flex:1 0 0;align-self:stretch}.approvalheader{display:flex;padding:16px 15px;justify-content:space-between;align-items:center;align-self:stretch;border-radius:6px 6px 0 0;background:var(--Gray-100, #F2F4F7)}.approvalbody{border-radius:8px;border:1px solid var(--Primary-25, #F6FCFF);background:var(--White, #FFF);box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;padding:12px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch}.cate-text{color:#626f86;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cate-sub{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px;mix-blend-mode:multiply}.card-label{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.cardsubtext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cardscroll{overflow-y:scroll;max-height:275px}.badge-light-blue{border-radius:16px;background:var(--Blue-50, #EFF8FF);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:4px;color:var(--Blue-700, #175CD3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badge-light-violet{border-radius:16px;background:var(--Purple-50, #F4F3FF);padding:2px 8px;justify-content:center;align-items:center;color:var(--Purple-700, #5925DC);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.headtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.card .card-header{padding:0px .5rem}\n"] }]
11658
+ args: [{ selector: 'lib-action-centre', template: "<div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.checklistApproval?.count !==null ?\r\n overallCardsData.checklistApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span>\r\n <span class=\"actiontext mx-5 mt-3\">Checklist waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"card\">\r\n <div class=\"actioncard my-3 mx-3\">\r\n <div class=\"d-flex\">\r\n <span class=\"actioncount\"> {{ overallCardsData.taskApproval?.count !==null ?\r\n overallCardsData.taskApproval?.count.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</span> <span class=\"actiontext mx-5 mt-3\">Task waiting for\r\n approval</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row m-0 my-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Approval</span>\r\n <span class=\"text-sub mb-2\">An Summary of all the checklists awaiting approval\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-4 mt-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control w-400px ps-14 mt-1 me-3\"\r\n placeholder=\"Search\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <lib-filters *ngIf=\"isTaskSelected\" class=\"me-3 mt-1\" [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n <form class=\"mt-1 borderless-select\" [formGroup]=\"form\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\" [nameField]=\"'label'\"\r\n [data]=\"statusselectControl\" class=\"w-200px\" (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <!-- open card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Open <span *ngIf=\"OpenApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\"> {{OpenApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvalOpenLoading && !approvalOpenNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let open of OpenApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ open.checkListName || '--' }}\r\n <span *ngIf=\"open.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ open.checkListType || '--' }}</span>\r\n <span *ngIf=\"open.checkListType && open.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ open.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"open?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': open.priorityType === 'high',\r\n 'badge-light-blue': open.priorityType === 'medium',\r\n 'badge-light-warning': open.priorityType === 'low'\r\n }\">\r\n {{ open.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ open.storeCount !==null ?\r\n open.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ open.scheduleRepeatedType ?\r\n open.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ open.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ open.approveCount !==null ?\r\n open.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ open.submitCount !==null ? open.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalOpenLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalOpenNoData && !approvalOpenLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Open Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Inprogress\r\n <span *ngIf=\"InprogressApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\">{{InprogressApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvalInprogressLoading && !approvalInprogressNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let inprogress of InprogressApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ inprogress.checkListName || '--'}}\r\n <span *ngIf=\"inprogress.taskType === 'redo'\"\r\n class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ inprogress.checkListType || '--' }}</span>\r\n <span *ngIf=\"inprogress.checkListType && inprogress.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ inprogress.checkListType || '--'\r\n }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div *ngIf=\"inprogress?.priorityType\">\r\n <span class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': inprogress.priorityType === 'high',\r\n 'badge-light-blue': inprogress.priorityType === 'medium',\r\n 'badge-light-warning': inprogress.priorityType === 'low'\r\n }\">\r\n {{ inprogress.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ inprogress.storeCount !==null ?\r\n inprogress.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ inprogress.scheduleRepeatedType ?\r\n inprogress.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ inprogress.publishDate | date: \"YYYY-MM-dd\" }}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ inprogress.approveCount !==null ?\r\n inprogress.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ inprogress.submitCount !==null ? inprogress.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalInprogressLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvalInprogressNoData && !approvalInprogressLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Inprogress Checklilst\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- inprogress card end -->\r\n <!-- Approved card start -->\r\n <div class=\"col-4\">\r\n <div class=\"approvalcard\">\r\n <div class=\"approvalheader\">\r\n <h3 class=\"card-title align-items-start d-flex flex-column mt-1\">\r\n <span class=\"cate-text\">Approved <span *ngIf=\"DoneApprovalListData.length\"\r\n class=\"cate-sub badge badge-light-default mx-2\"> {{DoneApprovalListData.length}}\r\n </span></span>\r\n </h3>\r\n <!-- <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\"\r\n fill=\"none\">\r\n <path d=\"M8.66667 3.33325V12.6666M8.66667 12.6666L13.3333 7.99992M8.66667 12.6666L4 7.99992\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"!approvedLoading && !approvedNoData\" class=\"p-5 cardscroll\">\r\n <div *ngFor=\"let done of DoneApprovalListData\" class=\"approvalbody mb-4\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"headingtext d-flex\">\r\n {{ done.checkListName || '--' }}\r\n <span *ngIf=\"done.taskType === 'redo'\" class=\"cate-sub badge badge-light-blue mx-1 mt-1\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_5119_5576)\">\r\n <path\r\n d=\"M11.5 2.00004V5.00004M11.5 5.00004H8.5M11.5 5.00004L9.18 2.82004C8.64263 2.28239 7.97781 1.88964 7.2476 1.67842C6.51738 1.46721 5.74555 1.44441 5.00414 1.61217C4.26273 1.77992 3.5759 2.13275 3.00773 2.63775C2.43957 3.14274 2.00858 3.78343 1.755 4.50004M0.5 10V7.00004M0.5 7.00004H3.5M0.5 7.00004L2.82 9.18004C3.35737 9.71768 4.02219 10.1104 4.7524 10.3217C5.48262 10.5329 6.25445 10.5557 6.99586 10.3879C7.73727 10.2202 8.4241 9.86732 8.99227 9.36233C9.56043 8.85734 9.99142 8.21664 10.245 7.50004\"\r\n stroke=\"#2E90FA\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_5576\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{ done.checkListType || '--' }}</span>\r\n <span *ngIf=\"done.checkListType && done.checkListType !== 'redo'\"\r\n class=\"cate-sub mx-1 badge badge-light-violet mt-1\"> {{ done.checkListType || '--' }}</span>\r\n </div>\r\n <!-- <span class=\"cate-sub badge badge-light-default\">Store Based</span> -->\r\n <div>\r\n <span *ngIf=\"done.priorityType\" class=\"cate-sub badge text-end\" [ngClass]=\"{\r\n 'badge-light-danger': done.priorityType === 'high',\r\n 'badge-light-blue': done.priorityType === 'medium',\r\n 'badge-light-warning': done.priorityType === 'low'\r\n }\">\r\n {{ done.priorityType | titlecase }} Priority\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.createdByName || '--' }}</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\"> {{ done.storeCount !==null ?\r\n done.storeCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} Stores</span></span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"cardsubtext ms-2 me-4\">Repeats {{ done.scheduleRepeatedType ?\r\n done.scheduleRepeatedType.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span></span>\r\n </div>\r\n <div class=\"ms-1 d-flex justify-content-between w-100\">\r\n <span><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_5119_3178)\">\r\n <mask id=\"path-1-inside-1_5119_3178\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\" />\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6.13055 0.00142049C5.25757 -0.0175778 4.39097 0.154192 3.59125 0.504738C2.79152 0.855284 2.07795 1.37616 1.50034 2.03099C0.922726 2.68583 0.495005 3.45885 0.247033 4.29608C-0.000939533 5.1333 -0.0631861 6.01457 0.0646388 6.87834C0.192464 7.74212 0.507279 8.56758 0.987107 9.29711C1.46693 10.0266 2.10021 10.6426 2.84272 11.1021C3.58523 11.5616 4.41908 11.8535 5.28606 11.9574C6.15303 12.0613 7.03224 11.9747 7.8623 11.7037C8.00412 11.6573 8.12173 11.5565 8.18924 11.4235C8.25675 11.2904 8.26864 11.136 8.2223 10.9942C8.17595 10.8523 8.07516 10.7347 7.9421 10.6672C7.80905 10.5997 7.65462 10.5878 7.5128 10.6342C6.61077 10.9287 5.6424 10.9536 4.72644 10.7058C3.81048 10.458 2.98675 9.94825 2.35627 9.2391C1.7258 8.52995 1.31598 7.65221 1.17709 6.71354C1.0382 5.77487 1.17627 4.81607 1.57436 3.95473C1.97246 3.09338 2.61327 2.36694 3.41822 1.86449C4.22317 1.36204 5.15725 1.10543 6.10592 1.12613C7.05458 1.14683 7.97659 1.44393 8.75885 1.98101C9.54112 2.51809 10.1496 3.27178 10.5098 4.14967C10.5664 4.28772 10.6755 4.39763 10.8131 4.45522C10.8813 4.48374 10.9544 4.49856 11.0282 4.49883C11.1021 4.4991 11.1753 4.48482 11.2437 4.4568C11.312 4.42878 11.3742 4.38757 11.4266 4.33552C11.479 4.28347 11.5207 4.22161 11.5492 4.15347C11.5777 4.08532 11.5926 4.01222 11.5928 3.93835C11.5931 3.86448 11.5788 3.79127 11.5508 3.72292C11.1076 2.64239 10.3586 1.7147 9.3958 1.05365C8.43299 0.392587 7.29817 0.0268946 6.13055 0.00142049ZM6.5618 2.81242C6.5618 2.66324 6.50253 2.52016 6.39704 2.41467C6.29155 2.30918 6.14848 2.24992 5.9993 2.24992C5.85011 2.24992 5.70704 2.30918 5.60155 2.41467C5.49606 2.52016 5.4368 2.66324 5.4368 2.81242V5.76742L3.9113 7.29217C3.85603 7.34367 3.8117 7.40577 3.78096 7.47477C3.75022 7.54377 3.73368 7.61825 3.73235 7.69378C3.73102 7.76931 3.74491 7.84433 3.7732 7.91437C3.80149 7.98441 3.8436 8.04804 3.89702 8.10145C3.95043 8.15486 4.01406 8.19697 4.0841 8.22526C4.15414 8.25355 4.22916 8.26745 4.30469 8.26612C4.38021 8.26478 4.4547 8.24825 4.5237 8.21751C4.5927 8.18676 4.6548 8.14244 4.7063 8.08717L6.3968 6.39742L6.5618 6.23242V2.81242ZM11.2493 11.2499C11.2493 11.4488 11.1703 11.6396 11.0296 11.7803C10.889 11.9209 10.6982 11.9999 10.4993 11.9999C10.3004 11.9999 10.1096 11.9209 9.96897 11.7803C9.82831 11.6396 9.7493 11.4488 9.7493 11.2499C9.7493 11.051 9.82831 10.8602 9.96897 10.7196C10.1096 10.5789 10.3004 10.4999 10.4993 10.4999C10.6982 10.4999 10.889 10.5789 11.0296 10.7196C11.1703 10.8602 11.2493 11.051 11.2493 11.2499ZM11.0618 6.56242C11.0618 6.41324 11.0025 6.27016 10.897 6.16467C10.7916 6.05919 10.6485 5.99992 10.4993 5.99992C10.3501 5.99992 10.207 6.05919 10.1015 6.16467C9.99606 6.27016 9.9368 6.41324 9.9368 6.56242V9.18742C9.9368 9.33661 9.99606 9.47968 10.1015 9.58517C10.207 9.69066 10.3501 9.74992 10.4993 9.74992C10.6485 9.74992 10.7916 9.69066 10.897 9.58517C11.0025 9.47968 11.0618 9.33661 11.0618 9.18742V6.56242Z\"\r\n fill=\"black\" stroke=\"black\" stroke-width=\"2\" mask=\"url(#path-1-inside-1_5119_3178)\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_5119_3178\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"cate-sub ms-3\">{{ done.publishDate | date: \"YYYY-MM-dd\"}}</span></span>\r\n <span class=\"cate-sub badge badge-light-success mx-1 mt-1\">{{ done.approveCount !==null ?\r\n done.approveCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }} / {{ done.submitCount !==null ? done.submitCount.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvedLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"approvedNoData && !approvedLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Approved Checklist\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <!-- Approved card end -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"row my-3\">\r\n <ng-container>\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Activity Log<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-activity-log></lib-activity-log>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".actioncard{display:flex;padding:8px 16px;align-items:center;gap:16px;align-self:stretch;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.actioncount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.actiontext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.approvalcard{border-radius:6px;background:var(--Gray-50, #F9FAFB);flex-direction:column;align-items:center;flex:1 0 0;align-self:stretch}.approvalheader{display:flex;padding:16px 15px;justify-content:space-between;align-items:center;align-self:stretch;border-radius:6px 6px 0 0;background:var(--Gray-100, #F2F4F7)}.approvalbody{border-radius:8px;border:1px solid var(--Primary-25, #F6FCFF);background:var(--White, #FFF);box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;padding:12px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch}.cate-text{color:#626f86;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cate-sub{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px;mix-blend-mode:multiply}.card-label{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.cardsubtext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.cardscroll{overflow-y:scroll;max-height:275px}.badge-light-blue{border-radius:16px;background:var(--Blue-50, #EFF8FF);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:4px;color:var(--Blue-700, #175CD3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badge-light-violet{border-radius:16px;background:var(--Purple-50, #F4F3FF);padding:2px 8px;justify-content:center;align-items:center;color:var(--Purple-700, #5925DC);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.headtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.card .card-header{padding:0px .5rem}\n"] }]
11636
11659
  }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }, { type: TraxService }, { type: i0.ChangeDetectorRef }] });
11637
11660
 
11638
11661
  class TaskLayoutComponent {