tango-app-ui-analyse-trax 3.6.2-bulktask-6 → 3.6.2-bulktask-8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/add-multitask/add-multitask.component.mjs +15 -4
- package/esm2022/lib/components/add-multitask/bulkcreationmodel/bulkcreationmodel.component.mjs +59 -11
- package/esm2022/lib/components/disabled-select/disabled-select.component.mjs +2 -2
- package/esm2022/lib/components/gallery/gallery.component.mjs +120 -107
- package/esm2022/lib/services/trax.service.mjs +4 -1
- package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-BV8rh2Dt.mjs → tango-app-ui-analyse-trax-eye-test-audit.module-BpJbNOps.mjs} +2 -2
- package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-BV8rh2Dt.mjs.map → tango-app-ui-analyse-trax-eye-test-audit.module-BpJbNOps.mjs.map} +1 -1
- package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-Dky7G8Ks.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CeNuiihn.mjs} +299 -225
- package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CeNuiihn.mjs.map +1 -0
- package/fesm2022/tango-app-ui-analyse-trax.mjs +1 -1
- package/lib/components/add-multitask/add-multitask.component.d.ts +4 -1
- package/lib/components/add-multitask/bulkcreationmodel/bulkcreationmodel.component.d.ts +4 -2
- package/lib/components/gallery/gallery.component.d.ts +4 -1
- package/lib/services/trax.service.d.ts +1 -0
- package/package.json +1 -1
- package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-Dky7G8Ks.mjs.map +0 -1
|
@@ -210,6 +210,9 @@ class TraxService {
|
|
|
210
210
|
taskvalidateUserData(users) {
|
|
211
211
|
return this.http.post(`${this.galleryApiUrl}/taskvalidateUserData`, users);
|
|
212
212
|
}
|
|
213
|
+
getallchecklist(users) {
|
|
214
|
+
return this.http.post(`${this.galleryApiUrl}/getallchecklist`, users);
|
|
215
|
+
}
|
|
213
216
|
assignUpload(users) {
|
|
214
217
|
return this.http.post(`${this.traxUrl}/assignUpload`, users);
|
|
215
218
|
}
|
|
@@ -8435,6 +8438,109 @@ function uniqueStringValidator() {
|
|
|
8435
8438
|
};
|
|
8436
8439
|
}
|
|
8437
8440
|
|
|
8441
|
+
const SELECT_CONTROL_VALUE_ACCESSOR = {
|
|
8442
|
+
provide: NG_VALUE_ACCESSOR,
|
|
8443
|
+
useExisting: forwardRef(() => ReactiveSelectComponent),
|
|
8444
|
+
multi: true,
|
|
8445
|
+
};
|
|
8446
|
+
class ReactiveSelectComponent {
|
|
8447
|
+
apiService;
|
|
8448
|
+
cd;
|
|
8449
|
+
onTouched;
|
|
8450
|
+
onChanged;
|
|
8451
|
+
isDisabled;
|
|
8452
|
+
idField;
|
|
8453
|
+
nameField;
|
|
8454
|
+
label;
|
|
8455
|
+
data;
|
|
8456
|
+
itemChange = new EventEmitter();
|
|
8457
|
+
isOpened = false;
|
|
8458
|
+
selected = null;
|
|
8459
|
+
selectedId;
|
|
8460
|
+
instanceId;
|
|
8461
|
+
constructor(apiService, cd) {
|
|
8462
|
+
this.apiService = apiService;
|
|
8463
|
+
this.cd = cd;
|
|
8464
|
+
}
|
|
8465
|
+
ngOnInit() {
|
|
8466
|
+
this.instanceId = crypto.randomUUID();
|
|
8467
|
+
this.apiService.dropDownTrigger.subscribe((e) => {
|
|
8468
|
+
if (e !== this.instanceId) {
|
|
8469
|
+
this.isOpened = false;
|
|
8470
|
+
this.cd.detectChanges();
|
|
8471
|
+
}
|
|
8472
|
+
});
|
|
8473
|
+
}
|
|
8474
|
+
writeValue(val) {
|
|
8475
|
+
this.selectedId = val;
|
|
8476
|
+
this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
|
|
8477
|
+
}
|
|
8478
|
+
registerOnChange(fn) {
|
|
8479
|
+
this.onChanged = fn;
|
|
8480
|
+
}
|
|
8481
|
+
registerOnTouched(fn) {
|
|
8482
|
+
this.onTouched = fn;
|
|
8483
|
+
}
|
|
8484
|
+
setDisabledState(isDisabled) {
|
|
8485
|
+
this.isDisabled = isDisabled;
|
|
8486
|
+
}
|
|
8487
|
+
onSelect(item) {
|
|
8488
|
+
this.onTouched();
|
|
8489
|
+
this.selected = item;
|
|
8490
|
+
this.selectedId = item?.[this.idField];
|
|
8491
|
+
this.isOpened = false;
|
|
8492
|
+
this.itemChange.next(this.selectedId);
|
|
8493
|
+
this.onChanged(this.selectedId);
|
|
8494
|
+
}
|
|
8495
|
+
onClick(event) {
|
|
8496
|
+
console.log(this.isDisabled);
|
|
8497
|
+
if (!this.isDisabled) {
|
|
8498
|
+
const targetElement = event.target;
|
|
8499
|
+
if (!this.isComponentClicked(targetElement)) {
|
|
8500
|
+
this.isOpened = false;
|
|
8501
|
+
}
|
|
8502
|
+
}
|
|
8503
|
+
}
|
|
8504
|
+
isComponentClicked(targetElement) {
|
|
8505
|
+
const parentElement = targetElement.parentElement;
|
|
8506
|
+
if (parentElement) {
|
|
8507
|
+
const clickedOnComponent = parentElement.classList.contains('custom-select');
|
|
8508
|
+
if (clickedOnComponent) {
|
|
8509
|
+
return true;
|
|
8510
|
+
}
|
|
8511
|
+
else {
|
|
8512
|
+
return this.isComponentClicked(parentElement);
|
|
8513
|
+
}
|
|
8514
|
+
}
|
|
8515
|
+
return false;
|
|
8516
|
+
}
|
|
8517
|
+
openDropdown() {
|
|
8518
|
+
this.isOpened = !this.isOpened;
|
|
8519
|
+
this.apiService.dropDownTrigger.next(this.instanceId);
|
|
8520
|
+
}
|
|
8521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [{ token: TraxService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { isDisabled: "isDisabled", idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { itemChange: "itemChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:200px}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:scroll}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
8523
|
+
}
|
|
8524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
|
|
8525
|
+
type: Component,
|
|
8526
|
+
args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:200px}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:scroll}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
8527
|
+
}], ctorParameters: () => [{ type: TraxService }, { type: i0.ChangeDetectorRef }], propDecorators: { isDisabled: [{
|
|
8528
|
+
type: Input
|
|
8529
|
+
}], idField: [{
|
|
8530
|
+
type: Input
|
|
8531
|
+
}], nameField: [{
|
|
8532
|
+
type: Input
|
|
8533
|
+
}], label: [{
|
|
8534
|
+
type: Input
|
|
8535
|
+
}], data: [{
|
|
8536
|
+
type: Input
|
|
8537
|
+
}], itemChange: [{
|
|
8538
|
+
type: Output
|
|
8539
|
+
}], onClick: [{
|
|
8540
|
+
type: HostListener,
|
|
8541
|
+
args: ['document:click', ['$event']]
|
|
8542
|
+
}] } });
|
|
8543
|
+
|
|
8438
8544
|
class DisabledSelectComponent {
|
|
8439
8545
|
cd;
|
|
8440
8546
|
authService;
|
|
@@ -8560,11 +8666,11 @@ class DisabledSelectComponent {
|
|
|
8560
8666
|
return this.filteredValues.every((item) => item.isSelected);
|
|
8561
8667
|
}
|
|
8562
8668
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisabledSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TraxService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", dropDowndisabled: "dropDowndisabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"[showDropdown ? '' : 'd-none', dropDowndisabled ? 'disabled-dropdown' : '']\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul ngc>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none
|
|
8669
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", dropDowndisabled: "dropDowndisabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"[showDropdown ? '' : 'd-none', dropDowndisabled ? 'disabled-dropdown' : '']\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul ngc>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
8564
8670
|
}
|
|
8565
8671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisabledSelectComponent, decorators: [{
|
|
8566
8672
|
type: Component,
|
|
8567
|
-
args: [{ selector: 'lib-disabled-select', template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"[showDropdown ? '' : 'd-none', dropDowndisabled ? 'disabled-dropdown' : '']\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul ngc>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none
|
|
8673
|
+
args: [{ selector: 'lib-disabled-select', template: "<div class=\"outer-container\">\r\n <div [ngClass]=\"disabled ? 'disable-input':''\" (click)=\"openDropdown($event)\" class=\"form-select\">\r\n <ng-container *ngIf=\"multi\" >\r\n <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span> -->\r\n <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}} \r\n </ng-container>\r\n <ng-container *ngIf=\"!multi\" >\r\n {{selectedValues?.[0]?.[searchField]}}\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"[showDropdown ? '' : 'd-none', dropDowndisabled ? 'disabled-dropdown' : '']\" class=\"input-container dropdown\" >\r\n <div class=\"w-100 input-wrapper\">\r\n <input [(ngModel)]=\"searchValue\" placeholder=\"Search\" (input)=\"onInput($event)\" type=\"text\"> \r\n <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg> \r\n </div>\r\n <ul ngc>\r\n <li *ngIf=\"multi && filteredValues?.length\">\r\n <label class=\"form-check\" [for]=\"instanceId\" >\r\n <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n [id]=\"instanceId\">\r\n <span class=\"form-check-label\" >\r\n Select All\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi ? '': 'ps-0'\" class=\"form-check\">\r\n <input [ngClass]=\"multi ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n [id]=\"item[idField] + instanceId\">\r\n <span class=\"form-check-label\" >\r\n {{item[searchField]}}\r\n </span>\r\n </label>\r\n </li>\r\n <li *ngIf=\"!filteredValues?.length\" >\r\n <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n </li>\r\n </ul> \r\n </div> \r\n \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
|
|
8568
8674
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TraxService }], propDecorators: { onClick: [{
|
|
8569
8675
|
type: HostListener,
|
|
8570
8676
|
args: ['document:click', ['$event']]
|
|
@@ -8610,6 +8716,7 @@ class AddMultitaskComponent {
|
|
|
8610
8716
|
restrictAttendance = false;
|
|
8611
8717
|
submitted = false;
|
|
8612
8718
|
headerData;
|
|
8719
|
+
selectedlistselectControl;
|
|
8613
8720
|
answerTypes = [
|
|
8614
8721
|
{ label: 'Descriptive Answer', value: 'descriptive' },
|
|
8615
8722
|
{ label: 'A/B Question', value: 'yes/no' },
|
|
@@ -8634,6 +8741,10 @@ class AddMultitaskComponent {
|
|
|
8634
8741
|
payload;
|
|
8635
8742
|
taskDetails;
|
|
8636
8743
|
checklistInfo;
|
|
8744
|
+
priorityTypeList = [{ value: 'low', label: 'Low' },
|
|
8745
|
+
{ value: 'medium', label: 'Medium' },
|
|
8746
|
+
{ value: 'high', label: 'High' }
|
|
8747
|
+
];
|
|
8637
8748
|
clientId;
|
|
8638
8749
|
timeDetails = [{ id: '00:00', text: "00:00" }, { id: '00:30', text: "00:30" }, { id: '01:00', text: "01:00" }, { id: '01:30', text: "01:30" }, { id: '02:00', text: "02:00" }, { id: '02:30', text: "02:30" }, { id: '03:00', text: "03:00" }, { id: '03:30', text: "03:30" }, { id: '04:00', text: "04:00" }, { id: '04:30', text: "04:30" }, { id: '05:00', text: "05:00" }, { id: '05:30', text: "05:30" }, { id: '06:00', text: "06:00" }, { id: '06:30', text: "06:30" }, { id: '07:00', text: "07:00" }, { id: '07:30', text: "07:30" }, { id: '08:00', text: "08:00" }, { id: '08:30', text: "08:30" }, { id: '09:00', text: "09:00" }, { id: '09:30', text: "09:30" }, { id: '10:00', text: "10:00" }, { id: '10:30', text: "10:30" },
|
|
8639
8750
|
{ id: '11:00', text: "11:00" }, { id: '11:30', text: "11:30" }, { id: '12:00', text: "12:00" }, { id: '12:30', text: "12:30" }, { id: '13:00', text: "13:00" }, { id: '13:30', text: "13:30" }, { id: '14:00', text: "14:00" }, { id: '14:30', text: "14:30" }, { id: '15:00', text: "15:00" }, { id: '15:30', text: "15:30" }, { id: '16:00', text: "16:00" }, { id: '16:30', text: "16:30" }, { id: '17:00', text: "17:00" }, { id: '17:30', text: "17:30" }, { id: '18:00', text: "18:00" }, { id: '18:30', text: "18:30" }, { id: '19:00', text: "19:00" }, { id: '19:30', text: "19:30" }, { id: '20:00', text: "20:00" }, { id: '20:30', text: "20:30" }, { id: '21:00', text: "21:00" }, { id: '21:30', text: "21:30" }, { id: '22:00', text: "22:00" }, { id: '22:30', text: "22:30" }, { id: '23:00', text: "23:00" }, { id: '23:30', text: "23:30" }, { id: '24:00', text: "24:00" }
|
|
@@ -8651,6 +8762,7 @@ class AddMultitaskComponent {
|
|
|
8651
8762
|
}
|
|
8652
8763
|
ngOnInit() {
|
|
8653
8764
|
console.log(this.payload);
|
|
8765
|
+
this.selectedlistselectControl = new FormControl('high');
|
|
8654
8766
|
this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
|
|
8655
8767
|
if (env) {
|
|
8656
8768
|
this.environment = env;
|
|
@@ -8686,6 +8798,9 @@ class AddMultitaskComponent {
|
|
|
8686
8798
|
}
|
|
8687
8799
|
}
|
|
8688
8800
|
}
|
|
8801
|
+
filterChange(event) {
|
|
8802
|
+
this.selectedlistselectControl.setValue(event);
|
|
8803
|
+
}
|
|
8689
8804
|
prevSlide() {
|
|
8690
8805
|
if (this.currentIndex > 0) {
|
|
8691
8806
|
this.currentIndex--;
|
|
@@ -8785,6 +8900,7 @@ class AddMultitaskComponent {
|
|
|
8785
8900
|
"clientId": this.clientId,
|
|
8786
8901
|
"allowedStoreLocation": this.allowedStoreLocation,
|
|
8787
8902
|
"restrictAttendance": this.restrictAttendance,
|
|
8903
|
+
"priorityType": this.selectedlistselectControl.value,
|
|
8788
8904
|
"checkListType": "checklistTask" // ['checklistTask','cctv]
|
|
8789
8905
|
};
|
|
8790
8906
|
if (response[0].questions[0].answerType === 'image' || response[0].questions[0].answerType === 'descriptiveImage' || response[0].questions[0].answerType === 'multipleImage') {
|
|
@@ -9081,11 +9197,11 @@ class AddMultitaskComponent {
|
|
|
9081
9197
|
this.destroy$.complete();
|
|
9082
9198
|
}
|
|
9083
9199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddMultitaskComponent, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2$2.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i2.NgbModal }, { token: i1$2.Router }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9084
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddMultitaskComponent, selector: "lib-add-multitask", inputs: { type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype", showcomment: "showcomment", excelData: "excelData", payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"modal-header px-0 py-5 \">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1 scroll custom-scroll\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <label class=\"label-name my-2\">\r\n Task Name<span class=\"text-danger\">*</span>\r\n </label>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n <div\r\n class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"row\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Task Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n <h3 class=\"mt-3 mb-3\">Configurations</h3>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Response Type\r\n </label>\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n </div>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\"\r\n *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\r\n <label class=\"label-name1 my-3\">\r\n Answer Options\r\n </label>\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')|| answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n <button *ngIf=\"isInvalidAnswer(i,j)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg class=\"cursor-pointer\"\r\n (click)=\"onAnswerDelete(i, j, k)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')||answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch ps-0\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\"\r\n *ngIf=\"question.controls.descriptivetype\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"row mb-3 fv-plugins-icon-container \">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Due date\r\n </label>\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">Due time</label>\r\n <div class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ps-12\">{{ selectedItem }}</span>\r\n </button>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n <ul class=\"list-unstyled\">\r\n <li *ngFor=\"let item of timeDetails\"\r\n [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n [class.disabled]=\"isDisabled(item.text)\" (click)=\"selectItem(item.text)\">\r\n {{ item.text }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n </div>\r\n <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n <div class=\"border-attach col-md-3 cursor-pointer\" *ngIf=\"this.uploadedFiles.length<3\"\r\n (click)=\"fileInput.click()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-3\">Add Attachment</span>\r\n <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\"\r\n (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n <img [src]=\"item\" alt=\"Preview\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (change)=\"togglegeofencing($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, the checklist can be filled by the user only when inside the store.\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n \r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': restrictAttendance }\" >\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (change)=\"toggleAttendance($event)\"> \r\n <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n </div>\r\n <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n <div role=\"group\" class=\"d-flex mt-3 w-100\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid||submitted\"\r\n (click)=\"onSubmit()\">Create\r\n Task</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 scroll \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1\">\r\n <h5 class=\"label-name1 my-2\">\r\n Redo\r\n </h5>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Your Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-5 w-100\">\r\n <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n [disabled]=\"submitted\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
|
|
9200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddMultitaskComponent, selector: "lib-add-multitask", inputs: { type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype", showcomment: "showcomment", excelData: "excelData", payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"modal-header px-0 py-5 \">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1 scroll custom-scroll\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='store'\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='user'\">\r\n <div>users Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedUsers.length}} users</h4>\r\n </div>\r\n </div>\r\n <label class=\"label-name my-2\">\r\n Task Name<span class=\"text-danger\">*</span>\r\n </label>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n <div\r\n class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"row\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Task Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n <h3 class=\"mt-3 mb-3\">Configurations</h3>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Response Type\r\n </label>\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n </div>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\"\r\n *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\r\n <label class=\"label-name1 my-3\">\r\n Answer Options\r\n </label>\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')|| answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n <button *ngIf=\"isInvalidAnswer(i,j)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg class=\"cursor-pointer\"\r\n (click)=\"onAnswerDelete(i, j, k)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')||answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch ps-0\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\"\r\n *ngIf=\"question.controls.descriptivetype\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"row mb-3 fv-plugins-icon-container \">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Due date\r\n </label>\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">Due time</label>\r\n <div class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ps-12\">{{ selectedItem }}</span>\r\n </button>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n <ul class=\"list-unstyled\">\r\n <li *ngFor=\"let item of timeDetails\"\r\n [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n [class.disabled]=\"isDisabled(item.text)\" (click)=\"selectItem(item.text)\">\r\n {{ item.text }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"fv-row row mb-3 fv-plugins-icon-container\">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Priority\r\n </label>\r\n \r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"priorityTypeList\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-6\">\r\n\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n <div class=\"border-attach col-md-3 cursor-pointer\" *ngIf=\"this.uploadedFiles.length<3\"\r\n (click)=\"fileInput.click()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-3\">Add Attachment</span>\r\n <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\"\r\n (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n <img [src]=\"item\" alt=\"Preview\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n (change)=\"togglegeofencing($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, the checklist can be filled by the user only when inside the store.\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n (change)=\"toggleAttendance($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n </div>\r\n <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n <div role=\"group\" class=\"d-flex mt-3 w-100\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n (click)=\"onSubmit()\">Create\r\n Task</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 scroll \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1\">\r\n <h5 class=\"label-name1 my-2\">\r\n Redo\r\n </h5>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='store'\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='user'\">\r\n <div>users Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedUsers.length}} users</h4>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Your Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-5 w-100\">\r\n <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "dropDowndisabled", "label"], outputs: ["selected"] }] });
|
|
9085
9201
|
}
|
|
9086
9202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddMultitaskComponent, decorators: [{
|
|
9087
9203
|
type: Component,
|
|
9088
|
-
args: [{ selector: 'lib-add-multitask', template: "<div class=\"card group-delete py-0\">\r\n <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"modal-header px-0 py-5 \">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1 scroll custom-scroll\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <label class=\"label-name my-2\">\r\n Task Name<span class=\"text-danger\">*</span>\r\n </label>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n <div\r\n class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"row\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Task Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n <h3 class=\"mt-3 mb-3\">Configurations</h3>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Response Type\r\n </label>\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n </div>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\"\r\n *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\r\n <label class=\"label-name1 my-3\">\r\n Answer Options\r\n </label>\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')|| answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n <button *ngIf=\"isInvalidAnswer(i,j)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg class=\"cursor-pointer\"\r\n (click)=\"onAnswerDelete(i, j, k)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')||answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch ps-0\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\"\r\n *ngIf=\"question.controls.descriptivetype\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"row mb-3 fv-plugins-icon-container \">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Due date\r\n </label>\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">Due time</label>\r\n <div class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ps-12\">{{ selectedItem }}</span>\r\n </button>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n <ul class=\"list-unstyled\">\r\n <li *ngFor=\"let item of timeDetails\"\r\n [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n [class.disabled]=\"isDisabled(item.text)\" (click)=\"selectItem(item.text)\">\r\n {{ item.text }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\" [searchField]=\"'userName'\"\r\n [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n </div>\r\n <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n <div class=\"border-attach col-md-3 cursor-pointer\" *ngIf=\"this.uploadedFiles.length<3\"\r\n (click)=\"fileInput.click()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-3\">Add Attachment</span>\r\n <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\"\r\n (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n <img [src]=\"item\" alt=\"Preview\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"allowedStoreLocation\" (change)=\"togglegeofencing($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, the checklist can be filled by the user only when inside the store.\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n \r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': restrictAttendance }\" >\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\" id=\"flexSwitchCheckDefault\" \r\n [checked]=\"restrictAttendance\" (change)=\"toggleAttendance($event)\"> \r\n <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n </div>\r\n <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n <div role=\"group\" class=\"d-flex mt-3 w-100\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid||submitted\"\r\n (click)=\"onSubmit()\">Create\r\n Task</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 scroll \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1\">\r\n <h5 class=\"label-name1 my-2\">\r\n Redo\r\n </h5>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Your Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-5 w-100\">\r\n <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n [disabled]=\"submitted\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}\n"] }]
|
|
9204
|
+
args: [{ selector: 'lib-add-multitask', template: "<div class=\"card group-delete py-0\">\r\n <div *ngIf=\"type ==='task'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"modal-header px-0 py-5 \">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-5\"> {{type}}</h3>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1 scroll custom-scroll\">\r\n <form [formGroup]=\"taskForm\">\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='store'\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='user'\">\r\n <div>users Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedUsers.length}} users</h4>\r\n </div>\r\n </div>\r\n <label class=\"label-name my-2\">\r\n Task Name<span class=\"text-danger\">*</span>\r\n </label>\r\n <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n <div\r\n class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"row px-5\" *ngIf=\"payload.inputData.answerType==='video'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='image'||payload.inputData.answerType==='descriptiveImage'||payload.inputData.answerType==='multipleImage'\">\r\n \r\n <div class=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div\r\n class=\"carousel-item\"\r\n *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n >\r\n <div class=\"row\">\r\n \r\n <img src=\"{{environment.TraxAnswerCDN}}{{group}}\"\r\n class=\"image-thumb mb-8 d-block w-100 cursor-pointer\"\r\n alt=\"Image {{ i + 1 }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevSlide()\">\r\n <span class=\"carousel-control-prev-icon\"></span>\r\n </button>\r\n \r\n <button class=\"carousel-control-next\" *ngIf=\"currentIndex < payload.refImage.length - 1\" (click)=\"nextSlide()\">\r\n <span class=\"carousel-control-next-icon\"></span>\r\n </button>\r\n \r\n <div *ngIf=\"payload.refImage.length > 1\" class=\"row\">\r\n <ul class=\"carousel-indicators\">\r\n <li *ngFor=\"let group of payload.refImage; let i = index\"\r\n [class.active]=\"i === currentIndex\"\r\n (click)=\"goToSlide(i)\">\r\n </li>\r\n </ul>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"row px-5\"\r\n *ngIf=\"payload.inputData.answerType==='multiplechoicesingle'||payload.inputData.answerType==='yes/no'||payload.inputData.answerType==='date'||payload.inputData.answerType==='time' ||payload.inputData.answerType==='multiplechoicemultiple'||payload.inputData.answerType==='linearscale'||payload.inputData.answerType==='descriptive' \">\r\n <div class=\"row\" *ngFor=\"let item of payload.inputData.userAnswer\">\r\n <span class=\"mt-1\">{{item.answer}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Task Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n <h3 class=\"mt-3 mb-3\">Configurations</h3>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Response Type\r\n </label>\r\n <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n class=\"form-select mb-5\">\r\n <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n {{answer.label}}</option>\r\n </select>\r\n\r\n </div>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\"\r\n *ngIf=\"question.get('answerType')?.value !=='time'&&question.get('answerType')?.value !=='date'\">\r\n <label class=\"label-name1 my-3\">\r\n Answer Options\r\n </label>\r\n <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n <div class=\"d-flex mb-5\">\r\n <div class=\"form-check\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input formControlName=\"descriptivetype\"\r\n class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')|| answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"input-group \">\r\n <input formControlName=\"answer\" type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Enter answer here\">\r\n\r\n <button *ngIf=\"isInvalidAnswer(i,j)\"\r\n class=\"btn btn-outline\" type=\"button\">\r\n <svg class=\"cursor-pointer\"\r\n (click)=\"onAnswerDelete(i, j, k)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n matTooltip=\"Delete answer\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"custom-test\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path _ngcontent-ng-c1491044170=\"\"\r\n d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n <div *ngIf=\"answer.get('answer')?.hasError('required')||answer.get('answer')?.hasError('whitespace')\"\r\n class=\"text-danger mt-2\">* Answer is required</div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n Add More Answer\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"form-check form-switch ps-0\">\r\n <input formControlName=\"allowUploadfromGallery\"\r\n class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <div\r\n class=\"d-flex align-items-center justify-content-between\">\r\n <div>\r\n <div class=\"form-check form-switch ps-0\">\r\n <input\r\n [formControl]=\"question.controls.allowUploadfromGallery\"\r\n class=\"form-check-input me-3\"\r\n type=\"checkbox\" role=\"switch\"\r\n [id]=\"'allow_upload_from_gallery' + i + j\">\r\n <label\r\n class=\"form-check-label check-label\"\r\n [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n upload from gallery</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\"\r\n *ngIf=\"question.controls.descriptivetype\">\r\n <div class=\"d-flex align-items-center h-100\">\r\n <div class=\"form-check\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"text\"\r\n [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n </div>\r\n <div class=\"form-check ms-5\">\r\n <input\r\n [formControl]=\"question.controls.descriptivetype\"\r\n class=\"form-check-input cursor-pointer\"\r\n type=\"radio\" value=\"number\"\r\n [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n <label class=\"cursor-pointer dscriptiveType\"\r\n [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n <ng-container\r\n *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n <ng-container [formGroup]=\"answer\">\r\n <div class=\"col-4\">\r\n <div class=\"d-flex justify-content-between align-items-center \">\r\n <div class=\"me-2\">\r\n <input type=\"number\" formControlName=\"rangeStart\"\r\n class=\"form-control\">\r\n </div>\r\n <div class=\"me-2 check-label\">\r\n to\r\n </div>\r\n <div>\r\n <input type=\"number\" formControlName=\"rangeEnd\"\r\n class=\"form-control\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"row mb-3 fv-plugins-icon-container \">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Due date\r\n </label>\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">Due time</label>\r\n <div class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"ps-12\">{{ selectedItem }}</span>\r\n </button>\r\n <div *ngIf=\"dropDown\"\r\n class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n <ul class=\"list-unstyled\">\r\n <li *ngFor=\"let item of timeDetails\"\r\n [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n [class.disabled]=\"isDisabled(item.text)\" (click)=\"selectItem(item.text)\">\r\n {{ item.text }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"fv-row row mb-3 fv-plugins-icon-container\">\r\n <div class=\"col-md-6\">\r\n <label class=\"label-name my-2\">\r\n Priority\r\n </label>\r\n \r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"priorityTypeList\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-6\">\r\n\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n <div class=\"border-attach col-md-3 cursor-pointer\" *ngIf=\"this.uploadedFiles.length<3\"\r\n (click)=\"fileInput.click()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-3\">Add Attachment</span>\r\n <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\"\r\n (change)=\"uploadFile($event,0,0,0)\" hidden />\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 image-preview mt-2\" *ngFor=\"let item of uploadedFiles; let i = index\">\r\n <button class=\"remove-icon\" (click)=\"removeImage(i)\">\u2716</button>\r\n <img [src]=\"item\" alt=\"Preview\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': allowedStoreLocation}\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 cursor-pointer ps-0\" type=\"checkbox\"\r\n id=\"flexSwitchCheckDefault\" [checked]=\"allowedStoreLocation\"\r\n (change)=\"togglegeofencing($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\"> Geo fencing</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, the checklist can be filled by the user only when inside the store.\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': restrictAttendance }\">\r\n <div class=\"form-check form-switch ps-0 my-2\">\r\n <input class=\"form-check-input my-5 mx-3 form-switch ps-0\" type=\"checkbox\"\r\n id=\"flexSwitchCheckDefault\" [checked]=\"restrictAttendance\"\r\n (change)=\"toggleAttendance($event)\">\r\n <span class=\"fw-bold\" for=\"sameComment\">Restrict attendance</span>\r\n <div class=\"text-muted medium mt-1 ms-10\">\r\n By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n </div>\r\n <div class=\" w-100 modal-footer px-0 pt-3 pb-5\">\r\n <div role=\"group\" class=\"d-flex mt-3 w-100\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid||submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\"\r\n (click)=\"onSubmit()\">Create\r\n Task</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 scroll \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n <ng-container [formGroup]=\"section\">\r\n <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n <ng-container [formGroup]=\"question\">\r\n\r\n <div class=\"modal-body scroll-y w-100 p-1\">\r\n <h5 class=\"label-name1 my-2\">\r\n Redo\r\n </h5>\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <div class=\"text-gray-600\">This Task is linked to </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Checklist Name :</div>\r\n <div>\r\n <h4> {{payload.checklistName}}</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3\">\r\n <div>Question :</div>\r\n <div><span class=\"text-wrap\"> {{question.get('qno')?.value}}.\r\n {{question.get('qname')?.value}}</span></div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='store'\">\r\n <div>Stores Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedStores.length}} stores</h4>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-3 mb-3\" *ngIf=\"payload.coverage==='user'\">\r\n <div>users Selected :</div>\r\n <div>\r\n <h4>{{payload.selectedUsers.length}} users</h4>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <form [formGroup]=\"taskForm\">\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\" *ngIf=\"showcomment\">\r\n <label class=\"label-name my-2\">\r\n Your Comment\r\n </label>\r\n <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n class=\"form-control form-control\" placeholder=\"Enter a comment\"\r\n name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n rows=\"4\"></textarea>\r\n </div>\r\n\r\n\r\n <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n <label class=\"label-name my-2\">\r\n Assign to\r\n </label>\r\n <!-- <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n [disabled]=\"true\"> -->\r\n <div *ngIf=\"filtertype==='Teams'\">\r\n <lib-disabled-select [items]=\"payload.selectedUsers\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedUsers\"></lib-disabled-select>\r\n </div>\r\n <div *ngIf=\"filtertype==='Clusters'\">\r\n <lib-disabled-select [items]=\"payload.selectedStores\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeName'\"\r\n [dropDowndisabled]=\"true\"\r\n [selectedValues]=\"payload.selectedStores\"></lib-disabled-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-5 w-100\">\r\n <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n [disabled]=\"submitted||payload.selectedStores.length===0&&payload.selectedUsers.length===0\" (click)=\"onSubmit()\">Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".carousel{position:relative}.carousel-item{display:none;transition:opacity .5s}.carousel-item.active{display:block;opacity:1}.option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#008edf}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);border:none;padding:10px;cursor:pointer}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-indicators{position:absolute;left:35%;transform:translate(-50%);gap:10px}.carousel-indicators li{list-style:none!important;width:10px;height:10px;background-color:#ddd;border-radius:50%;cursor:pointer;transition:background-color .3s}.carousel-indicators li.active{background-color:#007bff}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:25rem!important;height:25rem!important;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.image-thumb{height:auto;border-radius:8px}.dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:18px;white-space:nowrap}.nodata-title{font-size:14px!important;font-weight:600}.carousel-control-prev-icon,.carousel-control-next-icon{color:#fff!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}\n"] }]
|
|
9089
9205
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2$2.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i2.NgbModal }, { type: i1$2.Router }, { type: i3.ToastService }], propDecorators: { type: [{
|
|
9090
9206
|
type: Input
|
|
9091
9207
|
}], sourceCheckList_id: [{
|
|
@@ -9129,6 +9245,7 @@ class BulkcreationmodelComponent {
|
|
|
9129
9245
|
fileInput;
|
|
9130
9246
|
fileInput1;
|
|
9131
9247
|
afterValidation;
|
|
9248
|
+
modalRef;
|
|
9132
9249
|
excelError;
|
|
9133
9250
|
destroy$ = new Subject();
|
|
9134
9251
|
constructor(modalService, activeModal, traxService, toastService, cd) {
|
|
@@ -9139,24 +9256,29 @@ class BulkcreationmodelComponent {
|
|
|
9139
9256
|
this.cd = cd;
|
|
9140
9257
|
this.headerData = JSON.parse(localStorage.getItem('header-filters'));
|
|
9141
9258
|
}
|
|
9259
|
+
ngOnInit() {
|
|
9260
|
+
console.log('Selected Option:', this.payload);
|
|
9261
|
+
}
|
|
9142
9262
|
setOption(option) {
|
|
9143
9263
|
this.selectedOption = option;
|
|
9144
9264
|
}
|
|
9145
9265
|
proceed() {
|
|
9146
|
-
console.log('Selected Option:', this.selectedOption);
|
|
9147
9266
|
if (this.selectedOption === 'same') {
|
|
9148
9267
|
this.taskcreationPopup(true);
|
|
9149
9268
|
}
|
|
9150
9269
|
else {
|
|
9151
|
-
this.
|
|
9270
|
+
this.activeModal.close('submit');
|
|
9271
|
+
this.modalRef = this.modalService.open(this.bulkupload, {
|
|
9152
9272
|
centered: true, backdrop: 'static'
|
|
9153
9273
|
});
|
|
9154
9274
|
}
|
|
9155
9275
|
}
|
|
9156
9276
|
taskcreationPopup(showcomment) {
|
|
9277
|
+
this.activeModal.close('submit');
|
|
9157
9278
|
const modalRef = this.modalService.open(AddMultitaskComponent, {
|
|
9158
9279
|
centered: true,
|
|
9159
9280
|
size: 'lg',
|
|
9281
|
+
backdrop: 'static',
|
|
9160
9282
|
});
|
|
9161
9283
|
modalRef.componentInstance.type = this.type;
|
|
9162
9284
|
modalRef.componentInstance.filtertype = this.filtertype;
|
|
@@ -9168,12 +9290,12 @@ class BulkcreationmodelComponent {
|
|
|
9168
9290
|
modalRef.result.then((result) => {
|
|
9169
9291
|
console.log(result);
|
|
9170
9292
|
if (result == 'submit') {
|
|
9171
|
-
console.log("[[[[[[[[");
|
|
9172
9293
|
this.activeModal.close('submit');
|
|
9173
9294
|
}
|
|
9174
9295
|
});
|
|
9175
9296
|
}
|
|
9176
9297
|
closeactivepopup() {
|
|
9298
|
+
this.activeModal.close('submit');
|
|
9177
9299
|
this.modalService.dismissAll();
|
|
9178
9300
|
}
|
|
9179
9301
|
validateDetails() {
|
|
@@ -9186,6 +9308,9 @@ class BulkcreationmodelComponent {
|
|
|
9186
9308
|
this.traxService.taskvalidateUserData(params).pipe(takeUntil(this.destroy$)).subscribe({
|
|
9187
9309
|
next: (res) => {
|
|
9188
9310
|
if (res && res?.code == 200) {
|
|
9311
|
+
this.modalRef.close();
|
|
9312
|
+
this.modalService.dismissAll();
|
|
9313
|
+
this.activeModal.close('submit');
|
|
9189
9314
|
this.taskcreationPopup(false);
|
|
9190
9315
|
}
|
|
9191
9316
|
},
|
|
@@ -9194,7 +9319,7 @@ class BulkcreationmodelComponent {
|
|
|
9194
9319
|
let errorData = err?.error?.error;
|
|
9195
9320
|
console.log(errorData);
|
|
9196
9321
|
if (errorData.length) {
|
|
9197
|
-
this.
|
|
9322
|
+
this.modalRef.close();
|
|
9198
9323
|
const popupcontent = {
|
|
9199
9324
|
displayprop: false,
|
|
9200
9325
|
imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
|
|
@@ -9235,7 +9360,7 @@ class BulkcreationmodelComponent {
|
|
|
9235
9360
|
downloadTemplate() {
|
|
9236
9361
|
console.log(this.payload);
|
|
9237
9362
|
let excelData = [];
|
|
9238
|
-
if (this.payload.selectedStores && this.payload.selectedStores.length > 0) {
|
|
9363
|
+
if (this.payload.selectedStores && this.payload.selectedStores.length > 0 && this.payload.coverage === 'store') {
|
|
9239
9364
|
this.payload.selectedStores.forEach((item) => {
|
|
9240
9365
|
excelData.push({
|
|
9241
9366
|
checklistName: this.payload.checklistName,
|
|
@@ -9246,7 +9371,7 @@ class BulkcreationmodelComponent {
|
|
|
9246
9371
|
});
|
|
9247
9372
|
}
|
|
9248
9373
|
else if (this.payload.selectedUsers && this.payload.selectedUsers.length > 0) {
|
|
9249
|
-
this.payload.
|
|
9374
|
+
this.payload.selectedUsers.forEach((item) => {
|
|
9250
9375
|
excelData.push({
|
|
9251
9376
|
checklistName: this.payload.checklistName,
|
|
9252
9377
|
questionName: this.payload.inputData.qname,
|
|
@@ -9255,9 +9380,48 @@ class BulkcreationmodelComponent {
|
|
|
9255
9380
|
});
|
|
9256
9381
|
});
|
|
9257
9382
|
}
|
|
9258
|
-
|
|
9383
|
+
const worksheet = XLSX.utils.json_to_sheet(excelData);
|
|
9384
|
+
const range = XLSX.utils.decode_range(worksheet['!ref']);
|
|
9385
|
+
// Read-only style (for all columns except comments)
|
|
9386
|
+
const readOnlyStyle = {
|
|
9387
|
+
font: { bold: true, color: { rgb: 'FF0000' } },
|
|
9388
|
+
fill: { fgColor: { rgb: 'F5F5F5' } },
|
|
9389
|
+
border: {
|
|
9390
|
+
top: { style: 'thin', color: { rgb: 'AAAAAA' } },
|
|
9391
|
+
bottom: { style: 'thin', color: { rgb: 'AAAAAA' } },
|
|
9392
|
+
left: { style: 'thin', color: { rgb: 'AAAAAA' } },
|
|
9393
|
+
right: { style: 'thin', color: { rgb: 'AAAAAA' } },
|
|
9394
|
+
},
|
|
9395
|
+
};
|
|
9396
|
+
// Identify comment column index
|
|
9397
|
+
const headers = Object.keys(excelData[0]);
|
|
9398
|
+
const commentColIndex = headers.findIndex(h => h.toLowerCase() === 'comments');
|
|
9399
|
+
// Apply style to all non-comment cells
|
|
9400
|
+
for (let R = range.s.r + 1; R <= range.e.r; ++R) {
|
|
9401
|
+
for (let C = range.s.c; C <= range.e.c; ++C) {
|
|
9402
|
+
if (C !== commentColIndex) {
|
|
9403
|
+
const cellRef = XLSX.utils.encode_cell({ r: R, c: C });
|
|
9404
|
+
if (worksheet[cellRef]) {
|
|
9405
|
+
worksheet[cellRef].s = readOnlyStyle;
|
|
9406
|
+
}
|
|
9407
|
+
}
|
|
9408
|
+
}
|
|
9409
|
+
}
|
|
9410
|
+
const workbook = {
|
|
9411
|
+
Sheets: { Sheet1: worksheet },
|
|
9412
|
+
SheetNames: ['Sheet1'],
|
|
9413
|
+
};
|
|
9414
|
+
// You must enable styles in XLSX.write
|
|
9415
|
+
const excelBuffer = XLSX.write(workbook, {
|
|
9416
|
+
bookType: 'xlsx',
|
|
9417
|
+
type: 'array',
|
|
9418
|
+
cellStyles: true, // ⚠️ Enable styles
|
|
9419
|
+
});
|
|
9420
|
+
// Export the file
|
|
9421
|
+
this.traxService.saveAsExcelFile(excelBuffer, `Bulk ${this.type}`);
|
|
9259
9422
|
}
|
|
9260
9423
|
afterUplload(data) {
|
|
9424
|
+
this.activeModal.close('submit');
|
|
9261
9425
|
this.excelError = data;
|
|
9262
9426
|
this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
|
|
9263
9427
|
}
|
|
@@ -9309,7 +9473,7 @@ class BulkcreationmodelComponent {
|
|
|
9309
9473
|
});
|
|
9310
9474
|
console.log(error.length);
|
|
9311
9475
|
if (error.length) {
|
|
9312
|
-
this.
|
|
9476
|
+
this.modalRef.close();
|
|
9313
9477
|
const popupcontent = {
|
|
9314
9478
|
displayprop: false,
|
|
9315
9479
|
imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
|
|
@@ -9340,11 +9504,11 @@ class BulkcreationmodelComponent {
|
|
|
9340
9504
|
}
|
|
9341
9505
|
}
|
|
9342
9506
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BulkcreationmodelComponent, deps: [{ token: i2.NgbModal }, { token: i2.NgbActiveModal }, { token: TraxService }, { token: i3.ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9343
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BulkcreationmodelComponent, selector: "lib-bulkcreationmodel", inputs: { payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo", type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype" }, viewQueries: [{ propertyName: "bulkupload", first: true, predicate: ["bulkupload"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileInput1", first: true, predicate: ["file1"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M12 18V12M9 15H15\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'same' }\" (click)=\"setOption('same')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"sameComment\"\r\n [checked]=\"selectedOption === 'same'\">\r\n <div class=\"mx-3\">\r\n <label class=\"form-check-label fw-semibold\" for=\"sameComment\">\r\n Create task with same comment\r\n </label>\r\n <div class=\"text-muted small mt-1 ms-10\">\r\n Apply a single comment to all selected stores. This option is useful when the {{type}} details are identical for\r\n every store.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'different' }\" (click)=\"setOption('different')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"differentComments\"\r\n [checked]=\"selectedOption === 'different'\">\r\n <div class=\"mx-3\">\r\n <label class=\"form-check-label fw-semibold\" for=\"differentComments\">\r\n Create {{type}} with different comments <span class=\"text-muted\">(via Excel upload)</span>\r\n </label>\r\n <div class=\"text-muted small mt-1 ms-10\">\r\n Use an Excel template to assign different comments to each selected store. This allows you to customize the\r\n {{type}} for each location.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"modal-footer border-top-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"proceed()\">Proceed</button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto text-capitalize\">{{type}}</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">1. Use the template to upload and create multiple {{type}}s at once.</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">2. Download the template here - <a class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplate()\">Download the template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">3. Add your data to the Template File</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">4. Upload it below for processing</div>\r\n\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'upload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span *ngIf=\"this.payload.coverage==='store'\">Stores</span> <span *ngIf=\"this.payload.coverage==='users'\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"this.payload.coverage==='store'\">Stores</span> <span *ngIf=\"this.payload.coverage==='users'\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#0d6efd}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
9507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BulkcreationmodelComponent, selector: "lib-bulkcreationmodel", inputs: { payload: "payload", taskDetails: "taskDetails", checklistInfo: "checklistInfo", type: "type", sourceCheckList_id: "sourceCheckList_id", filtertype: "filtertype" }, viewQueries: [{ propertyName: "bulkupload", first: true, predicate: ["bulkupload"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileInput1", first: true, predicate: ["file1"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg *ngIf=\"type==='task'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"type==='redo'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'same' }\" (click)=\"setOption('same')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"sameComment\"\r\n [checked]=\"selectedOption === 'same'\">\r\n <div class=\"mx-3\">\r\n <label class=\"fw-semibold\" for=\"sameComment\">\r\n Create {{type}} with same comment\r\n </label>\r\n <div [ngClass]=\"selectedOption === 'same' ? 'active-option' : 'text-normal'\" class=\"small mt-1 ms-10\">\r\n Apply a single comment to all selected stores. This option is useful when the {{type}} details are identical\r\n for\r\n every store.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'different' }\" (click)=\"setOption('different')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"differentComments\"\r\n [checked]=\"selectedOption === 'different'\">\r\n <div class=\"mx-3\">\r\n <label class=\"fw-semibold\" for=\"differentComments\">\r\n Create {{type}} with different comments <span class=\"text-muted\">(via Excel upload)</span>\r\n </label>\r\n <div [ngClass]=\"selectedOption === 'different' ? 'active-option' : 'text-normal'\" class=\" small mt-1 ms-10\">\r\n Use an Excel template to assign different comments to each selected store. This allows you to customize the\r\n {{type}} for each location.\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fw-semibold mt-3 mb-2\" *ngIf=\"type==='redo'&&this.payload?.selectedUsers?.length===0&&this.payload?.selectedStores?.length==0\">\r\n <div class=\"d-flex\">\r\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEF0C7\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#FFFAEB\" stroke-width=\"4\" />\r\n <path\r\n d=\"M18.0005 15.3341V18.0008M18.0005 20.6675H18.0072M16.8605 11.9075L11.2138 21.3341C11.0974 21.5357 11.0358 21.7643 11.0352 21.9971C11.0345 22.2299 11.0948 22.4589 11.2101 22.6611C11.3254 22.8634 11.4917 23.032 11.6923 23.15C11.893 23.2681 12.121 23.3316 12.3538 23.3341H23.6472C23.88 23.3316 24.108 23.2681 24.3087 23.15C24.5094 23.032 24.6756 22.8634 24.7909 22.6611C24.9062 22.4589 24.9665 22.2299 24.9658 21.9971C24.9652 21.7643 24.9036 21.5357 24.7872 21.3341L19.1405 11.9075C19.0217 11.7115 18.8543 11.5495 18.6546 11.4371C18.4549 11.3247 18.2297 11.2656 18.0005 11.2656C17.7713 11.2656 17.5461 11.3247 17.3464 11.4371C17.1467 11.5495 16.9793 11.7115 16.8605 11.9075Z\"\r\n stroke=\"#DC6803\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div class=\"ms-2\">Redo will apply only to the checklist response submitted on today. Any responses submitted on\r\n previous dates will be unselected and excluded from redo.</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-footer col-md-12 text-end border-top-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeactivepopup()\" data-bs-dismiss=\"modal\">Cancel</button>\r\n <button type=\"button\" [disabled]=\"this.payload?.selectedUsers?.length===0&&this.payload?.selectedStores?.length==0\" class=\"btn btn-primary\" (click)=\"proceed()\">Proceed</button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto text-capitalize\">{{type}}</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">1. Use the template to upload and create multiple\r\n {{type}}s at once.</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">2. Download the template here - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplate()\">Download Prefilled\r\n Template</a>\r\n </div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">3. Add your data to the Template File</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">4. Upload it below for processing</div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"modalRef.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'upload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg *ngIf=\"type==='task'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"type==='redo'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"this.payload.coverage==='store'\">Stores</span>\r\n <span *ngIf=\"this.payload.coverage==='users'\">Users</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\"\r\n class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-4 btn-default ms-3 btn-primary\"\r\n (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\"\r\n (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#0d6efd}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.text-normal{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
9344
9508
|
}
|
|
9345
9509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BulkcreationmodelComponent, decorators: [{
|
|
9346
9510
|
type: Component,
|
|
9347
|
-
args: [{ selector: 'lib-bulkcreationmodel', template: "<div class=\"card group-delete py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2L20 8M14 2V8H20M12 18V12M9 15H15\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'same' }\" (click)=\"setOption('same')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"sameComment\"\r\n [checked]=\"selectedOption === 'same'\">\r\n <div class=\"mx-3\">\r\n <label class=\"form-check-label fw-semibold\" for=\"sameComment\">\r\n Create task with same comment\r\n </label>\r\n <div class=\"text-muted small mt-1 ms-10\">\r\n Apply a single comment to all selected stores. This option is useful when the {{type}} details are identical for\r\n every store.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'different' }\" (click)=\"setOption('different')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"differentComments\"\r\n [checked]=\"selectedOption === 'different'\">\r\n <div class=\"mx-3\">\r\n <label class=\"form-check-label fw-semibold\" for=\"differentComments\">\r\n Create {{type}} with different comments <span class=\"text-muted\">(via Excel upload)</span>\r\n </label>\r\n <div class=\"text-muted small mt-1 ms-10\">\r\n Use an Excel template to assign different comments to each selected store. This allows you to customize the\r\n {{type}} for each location.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"modal-footer border-top-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" data-bs-dismiss=\"modal\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"proceed()\">Proceed</button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto text-capitalize\">{{type}}</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">1. Use the template to upload and create multiple {{type}}s at once.</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">2. Download the template here - <a class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplate()\">Download the template here</a></div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">3. Add your data to the Template File</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">4. Upload it below for processing</div>\r\n\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"model.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'upload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Assign <span *ngIf=\"this.payload.coverage==='store'\">Stores</span> <span *ngIf=\"this.payload.coverage==='users'\">Users</span></span></div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"this.payload.coverage==='store'\">Stores</span> <span *ngIf=\"this.payload.coverage==='users'\">Users</span></div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-4 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#0d6efd}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}\n"] }]
|
|
9511
|
+
args: [{ selector: 'lib-bulkcreationmodel', template: "<div class=\"card group-delete py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg *ngIf=\"type==='task'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"type==='redo'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n <div class=\"form-check mb-3 p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'same' }\" (click)=\"setOption('same')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"sameComment\"\r\n [checked]=\"selectedOption === 'same'\">\r\n <div class=\"mx-3\">\r\n <label class=\"fw-semibold\" for=\"sameComment\">\r\n Create {{type}} with same comment\r\n </label>\r\n <div [ngClass]=\"selectedOption === 'same' ? 'active-option' : 'text-normal'\" class=\"small mt-1 ms-10\">\r\n Apply a single comment to all selected stores. This option is useful when the {{type}} details are identical\r\n for\r\n every store.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-check p-3 border rounded option-box\"\r\n [ngClass]=\"{ 'active-option': selectedOption === 'different' }\" (click)=\"setOption('different')\">\r\n <input class=\"form-check-input my-5 mx-3\" type=\"radio\" name=\"taskOption\" id=\"differentComments\"\r\n [checked]=\"selectedOption === 'different'\">\r\n <div class=\"mx-3\">\r\n <label class=\"fw-semibold\" for=\"differentComments\">\r\n Create {{type}} with different comments <span class=\"text-muted\">(via Excel upload)</span>\r\n </label>\r\n <div [ngClass]=\"selectedOption === 'different' ? 'active-option' : 'text-normal'\" class=\" small mt-1 ms-10\">\r\n Use an Excel template to assign different comments to each selected store. This allows you to customize the\r\n {{type}} for each location.\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fw-semibold mt-3 mb-2\" *ngIf=\"type==='redo'&&this.payload?.selectedUsers?.length===0&&this.payload?.selectedStores?.length==0\">\r\n <div class=\"d-flex\">\r\n <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEF0C7\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#FFFAEB\" stroke-width=\"4\" />\r\n <path\r\n d=\"M18.0005 15.3341V18.0008M18.0005 20.6675H18.0072M16.8605 11.9075L11.2138 21.3341C11.0974 21.5357 11.0358 21.7643 11.0352 21.9971C11.0345 22.2299 11.0948 22.4589 11.2101 22.6611C11.3254 22.8634 11.4917 23.032 11.6923 23.15C11.893 23.2681 12.121 23.3316 12.3538 23.3341H23.6472C23.88 23.3316 24.108 23.2681 24.3087 23.15C24.5094 23.032 24.6756 22.8634 24.7909 22.6611C24.9062 22.4589 24.9665 22.2299 24.9658 21.9971C24.9652 21.7643 24.9036 21.5357 24.7872 21.3341L19.1405 11.9075C19.0217 11.7115 18.8543 11.5495 18.6546 11.4371C18.4549 11.3247 18.2297 11.2656 18.0005 11.2656C17.7713 11.2656 17.5461 11.3247 17.3464 11.4371C17.1467 11.5495 16.9793 11.7115 16.8605 11.9075Z\"\r\n stroke=\"#DC6803\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <div class=\"ms-2\">Redo will apply only to the checklist response submitted on today. Any responses submitted on\r\n previous dates will be unselected and excluded from redo.</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-footer col-md-12 text-end border-top-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeactivepopup()\" data-bs-dismiss=\"modal\">Cancel</button>\r\n <button type=\"button\" [disabled]=\"this.payload?.selectedUsers?.length===0&&this.payload?.selectedStores?.length==0\" class=\"btn btn-primary\" (click)=\"proceed()\">Proceed</button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #bulkupload let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-5\">\r\n <div class=\"card-title mt-3\">\r\n <div class=\"bg-light-primary rounded-5 w-40px h-40px d-flex justify-content-center align-items-center\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div> <span class=\"config-heading fw-semibold ms-5 w-auto text-capitalize\">{{type}}</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"flex-column\">\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">1. Use the template to upload and create multiple\r\n {{type}}s at once.</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">2. Download the template here - <a\r\n class=\"text-decoration-underline cursor-pointer\" (click)=\"downloadTemplate()\">Download Prefilled\r\n Template</a>\r\n </div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">3. Add your data to the Template File</div>\r\n <div class=\"storeAssign mt-3\" style=\"font-weight: 400\">4. Upload it below for processing</div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"modalRef.close()\">Cancel</button>\r\n <button class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"file1.click()\">Upload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'upload')\" />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #afterValidation let-model>\r\n <div class=\"card border-0\">\r\n <div class=\"card-header border-0 mt-0\">\r\n <div class=\"my-5 mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle d-flex \">\r\n <svg *ngIf=\"type==='task'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"type==='redo'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path\r\n d=\"M39 19.9996V25.9996M39 25.9996H33M39 25.9996L34.36 21.6396C33.2853 20.5643 31.9556 19.7788 30.4952 19.3564C29.0348 18.9339 27.4911 18.8883 26.0083 19.2238C24.5255 19.5594 23.1518 20.265 22.0155 21.275C20.8791 22.285 20.0172 23.5664 19.51 24.9996M17 35.9996V29.9996M17 29.9996H23M17 29.9996L21.64 34.3596C22.7147 35.4349 24.0444 36.2204 25.5048 36.6428C26.9652 37.0652 28.5089 37.1108 29.9917 36.7753C31.4745 36.4398 32.8482 35.7342 33.9845 34.7242C35.1209 33.7142 35.9828 32.4328 36.49 30.9996\"\r\n stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"text-capitalize mx-3 mt-3\"> {{type}}</h3>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-0\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Total <span *ngIf=\"this.payload.coverage==='store'\">Stores</span>\r\n <span *ngIf=\"this.payload.coverage==='users'\">Users</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">\r\n {{excelError?.error?.length || 0}}</div>\r\n <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"excelError\" class=\"flex-column mt-5\">\r\n <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n <div class=\"subtitle mt-5\">Please provide correct and complete layout information.</div>\r\n <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\"\r\n class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-footer border-0 text-end pt-0\">\r\n <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n <button *ngIf=\"!excelError\" class=\"btn btn-md py-4 btn-default ms-3 btn-primary\"\r\n (click)=\"validateDetails()\">Proceed</button>\r\n <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\"\r\n (click)=\"Reupload();\">Reupload</button>\r\n <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\"\r\n (change)=\"onFileUpload($event,'reupload')\" />\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".option-box{transition:border-color .3s,background-color .3s;cursor:pointer}.option-box:hover{border-color:#0d6efd}.active-option{border-color:#008edf!important;color:#008edf!important;background-color:#e7f1ff}.text-normal{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}\n"] }]
|
|
9348
9512
|
}], ctorParameters: () => [{ type: i2.NgbModal }, { type: i2.NgbActiveModal }, { type: TraxService }, { type: i3.ToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { payload: [{
|
|
9349
9513
|
type: Input
|
|
9350
9514
|
}], taskDetails: [{
|
|
@@ -9371,109 +9535,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9371
9535
|
args: ['afterValidation']
|
|
9372
9536
|
}] } });
|
|
9373
9537
|
|
|
9374
|
-
const SELECT_CONTROL_VALUE_ACCESSOR = {
|
|
9375
|
-
provide: NG_VALUE_ACCESSOR,
|
|
9376
|
-
useExisting: forwardRef(() => ReactiveSelectComponent),
|
|
9377
|
-
multi: true,
|
|
9378
|
-
};
|
|
9379
|
-
class ReactiveSelectComponent {
|
|
9380
|
-
apiService;
|
|
9381
|
-
cd;
|
|
9382
|
-
onTouched;
|
|
9383
|
-
onChanged;
|
|
9384
|
-
isDisabled;
|
|
9385
|
-
idField;
|
|
9386
|
-
nameField;
|
|
9387
|
-
label;
|
|
9388
|
-
data;
|
|
9389
|
-
itemChange = new EventEmitter();
|
|
9390
|
-
isOpened = false;
|
|
9391
|
-
selected = null;
|
|
9392
|
-
selectedId;
|
|
9393
|
-
instanceId;
|
|
9394
|
-
constructor(apiService, cd) {
|
|
9395
|
-
this.apiService = apiService;
|
|
9396
|
-
this.cd = cd;
|
|
9397
|
-
}
|
|
9398
|
-
ngOnInit() {
|
|
9399
|
-
this.instanceId = crypto.randomUUID();
|
|
9400
|
-
this.apiService.dropDownTrigger.subscribe((e) => {
|
|
9401
|
-
if (e !== this.instanceId) {
|
|
9402
|
-
this.isOpened = false;
|
|
9403
|
-
this.cd.detectChanges();
|
|
9404
|
-
}
|
|
9405
|
-
});
|
|
9406
|
-
}
|
|
9407
|
-
writeValue(val) {
|
|
9408
|
-
this.selectedId = val;
|
|
9409
|
-
this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
|
|
9410
|
-
}
|
|
9411
|
-
registerOnChange(fn) {
|
|
9412
|
-
this.onChanged = fn;
|
|
9413
|
-
}
|
|
9414
|
-
registerOnTouched(fn) {
|
|
9415
|
-
this.onTouched = fn;
|
|
9416
|
-
}
|
|
9417
|
-
setDisabledState(isDisabled) {
|
|
9418
|
-
this.isDisabled = isDisabled;
|
|
9419
|
-
}
|
|
9420
|
-
onSelect(item) {
|
|
9421
|
-
this.onTouched();
|
|
9422
|
-
this.selected = item;
|
|
9423
|
-
this.selectedId = item?.[this.idField];
|
|
9424
|
-
this.isOpened = false;
|
|
9425
|
-
this.itemChange.next(this.selectedId);
|
|
9426
|
-
this.onChanged(this.selectedId);
|
|
9427
|
-
}
|
|
9428
|
-
onClick(event) {
|
|
9429
|
-
console.log(this.isDisabled);
|
|
9430
|
-
if (!this.isDisabled) {
|
|
9431
|
-
const targetElement = event.target;
|
|
9432
|
-
if (!this.isComponentClicked(targetElement)) {
|
|
9433
|
-
this.isOpened = false;
|
|
9434
|
-
}
|
|
9435
|
-
}
|
|
9436
|
-
}
|
|
9437
|
-
isComponentClicked(targetElement) {
|
|
9438
|
-
const parentElement = targetElement.parentElement;
|
|
9439
|
-
if (parentElement) {
|
|
9440
|
-
const clickedOnComponent = parentElement.classList.contains('custom-select');
|
|
9441
|
-
if (clickedOnComponent) {
|
|
9442
|
-
return true;
|
|
9443
|
-
}
|
|
9444
|
-
else {
|
|
9445
|
-
return this.isComponentClicked(parentElement);
|
|
9446
|
-
}
|
|
9447
|
-
}
|
|
9448
|
-
return false;
|
|
9449
|
-
}
|
|
9450
|
-
openDropdown() {
|
|
9451
|
-
this.isOpened = !this.isOpened;
|
|
9452
|
-
this.apiService.dropDownTrigger.next(this.instanceId);
|
|
9453
|
-
}
|
|
9454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [{ token: TraxService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { isDisabled: "isDisabled", idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { itemChange: "itemChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:200px}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:scroll}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
9456
|
-
}
|
|
9457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
|
|
9458
|
-
type: Component,
|
|
9459
|
-
args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 \">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select{min-width:200px}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:scroll}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
9460
|
-
}], ctorParameters: () => [{ type: TraxService }, { type: i0.ChangeDetectorRef }], propDecorators: { isDisabled: [{
|
|
9461
|
-
type: Input
|
|
9462
|
-
}], idField: [{
|
|
9463
|
-
type: Input
|
|
9464
|
-
}], nameField: [{
|
|
9465
|
-
type: Input
|
|
9466
|
-
}], label: [{
|
|
9467
|
-
type: Input
|
|
9468
|
-
}], data: [{
|
|
9469
|
-
type: Input
|
|
9470
|
-
}], itemChange: [{
|
|
9471
|
-
type: Output
|
|
9472
|
-
}], onClick: [{
|
|
9473
|
-
type: HostListener,
|
|
9474
|
-
args: ['document:click', ['$event']]
|
|
9475
|
-
}] } });
|
|
9476
|
-
|
|
9477
9538
|
class GroupSelectComponent {
|
|
9478
9539
|
cd;
|
|
9479
9540
|
authService;
|
|
@@ -9882,6 +9943,8 @@ class GalleryComponent {
|
|
|
9882
9943
|
inputDataTask;
|
|
9883
9944
|
otherTaskData;
|
|
9884
9945
|
selectAllTask = false;
|
|
9946
|
+
totalrecordcount = 0;
|
|
9947
|
+
selectedRecordCount = 0;
|
|
9885
9948
|
refImage = [];
|
|
9886
9949
|
constructor(fb, gs, traxService, cd, modalService, route, router, toastService, location, pageInfo) {
|
|
9887
9950
|
this.fb = fb;
|
|
@@ -10368,21 +10431,6 @@ class GalleryComponent {
|
|
|
10368
10431
|
next: (res) => {
|
|
10369
10432
|
if (res && res.code == 200) {
|
|
10370
10433
|
this.checklists = res.data.checklistData;
|
|
10371
|
-
if (this.headerFilters.client === "59") {
|
|
10372
|
-
this.checklists = [...this.checklists, ...[{
|
|
10373
|
-
"_id": "6746c889f5adc3b32f0d7e57",
|
|
10374
|
-
"sourceCheckList_id": "customertrial",
|
|
10375
|
-
"checkListName": "Customer Trial",
|
|
10376
|
-
"checkListType": "AI",
|
|
10377
|
-
"createdByName": "Bejan",
|
|
10378
|
-
"storeCount": 0,
|
|
10379
|
-
"scheduleRepeatedType": "daily",
|
|
10380
|
-
"scheduleStartTime": "10:00 AM",
|
|
10381
|
-
"scheduleEndTime": "10:00 PM",
|
|
10382
|
-
"checkListDescription": "",
|
|
10383
|
-
"publish": true
|
|
10384
|
-
}]];
|
|
10385
|
-
}
|
|
10386
10434
|
setTimeout(() => {
|
|
10387
10435
|
if (this.queryParams.sourceCheckList_id && this.queryParams.checklistType) {
|
|
10388
10436
|
this.galleryForm.get('sourceCheckList_id')?.setValue(this.queryParams.sourceCheckList_id);
|
|
@@ -10428,6 +10476,7 @@ class GalleryComponent {
|
|
|
10428
10476
|
this.showflag = false;
|
|
10429
10477
|
}
|
|
10430
10478
|
this.galleryForm.get('filtertype')?.setValue(getchecklist[0]?.coverage === 'user' ? "Teams" : "Clusters");
|
|
10479
|
+
this.coverageData(getchecklist[0]?.coverage);
|
|
10431
10480
|
this.galleryForm.get('checkListType')?.setValue(getchecklist[0]?.checkListType);
|
|
10432
10481
|
this.galleryForm.get('checklistName')?.setValue(getchecklist[0]?.checkListName);
|
|
10433
10482
|
this.checklistName = this.galleryForm.value.checklistName;
|
|
@@ -10436,6 +10485,7 @@ class GalleryComponent {
|
|
|
10436
10485
|
}
|
|
10437
10486
|
else {
|
|
10438
10487
|
this.galleryForm.get('filtertype')?.setValue(this.checklists[0]?.coverage === 'user' ? "Teams" : "Clusters");
|
|
10488
|
+
this.coverageData(this.checklists[0]?.coverage);
|
|
10439
10489
|
this.galleryForm.get('checkListType')?.setValue(this.checklists[0]?.checkListType);
|
|
10440
10490
|
this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName);
|
|
10441
10491
|
this.galleryForm.get('checkListDescription')?.setValue(this.checklists[0]?.checkListDescription);
|
|
@@ -10453,6 +10503,7 @@ class GalleryComponent {
|
|
|
10453
10503
|
}
|
|
10454
10504
|
else {
|
|
10455
10505
|
this.galleryForm.get('filtertype')?.setValue(this.checklists[0]?.coverage === 'user' ? "Teams" : "Clusters");
|
|
10506
|
+
this.coverageData(this.checklists[0]?.coverage);
|
|
10456
10507
|
this.galleryForm.get('checkListType')?.setValue(this.checklists[0]?.checkListType);
|
|
10457
10508
|
if (this.checklists[0].checkListType === "AI") {
|
|
10458
10509
|
this.showflag = false;
|
|
@@ -10488,12 +10539,14 @@ class GalleryComponent {
|
|
|
10488
10539
|
else {
|
|
10489
10540
|
this.select = this.galleryForm.value.type === 'checklist' ? "custom" : this.galleryForm.value.type;
|
|
10490
10541
|
if (type) {
|
|
10542
|
+
console.log(this.galleryForm.value);
|
|
10491
10543
|
if (this.galleryForm.value.type === 'checklist') {
|
|
10492
10544
|
if (this.galleryForm.value.filtertype === 'Clusters') {
|
|
10493
10545
|
this.galleryForm.get('userList')?.setValue([]);
|
|
10494
10546
|
this.storeListdropdown();
|
|
10495
10547
|
}
|
|
10496
10548
|
else {
|
|
10549
|
+
console.log("0000000000000000000");
|
|
10497
10550
|
this.galleryForm.get('storeList')?.setValue([]);
|
|
10498
10551
|
this.userListdropdown();
|
|
10499
10552
|
}
|
|
@@ -10697,14 +10750,6 @@ class GalleryComponent {
|
|
|
10697
10750
|
this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
|
|
10698
10751
|
next: (res) => {
|
|
10699
10752
|
if (res && res.code == 200) {
|
|
10700
|
-
// if(this.queryParams.userEmail){
|
|
10701
|
-
// let getuser = res.data.filter((ele: any) => ele.userEmail === this.queryParams.userEmail)
|
|
10702
|
-
// this.userList = getuser;
|
|
10703
|
-
// this.galleryForm.get('userList')?.setValue(this.userList)
|
|
10704
|
-
// }else{
|
|
10705
|
-
// this.userList = res.data
|
|
10706
|
-
// this.galleryForm.get('userList')?.setValue(res.data)
|
|
10707
|
-
// }
|
|
10708
10753
|
let users = res.data.map((data) => data.userEmail);
|
|
10709
10754
|
let obj = {
|
|
10710
10755
|
"fromDate": this.galleryForm.value.fromDate,
|
|
@@ -10725,7 +10770,8 @@ class GalleryComponent {
|
|
|
10725
10770
|
next: (res) => {
|
|
10726
10771
|
if (res && res.code === 200) {
|
|
10727
10772
|
this.userList = res.data.storesDetails;
|
|
10728
|
-
|
|
10773
|
+
console.log("-----", this.userList);
|
|
10774
|
+
this.galleryForm.get('userList')?.setValue(this.userList);
|
|
10729
10775
|
this.galleryForm.get('storeList')?.setValue([]);
|
|
10730
10776
|
this.storeList = [];
|
|
10731
10777
|
this.getChecklistQA(false);
|
|
@@ -11055,6 +11101,34 @@ class GalleryComponent {
|
|
|
11055
11101
|
}
|
|
11056
11102
|
});
|
|
11057
11103
|
}
|
|
11104
|
+
coverageData(coverage) {
|
|
11105
|
+
if (coverage === 'store') {
|
|
11106
|
+
this.galleryForm.get('userList')?.setValue([]);
|
|
11107
|
+
this.galleryForm.get('filtertype')?.setValue('Clusters');
|
|
11108
|
+
this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
|
|
11109
|
+
next: (res) => {
|
|
11110
|
+
if (res && res.code == 200) {
|
|
11111
|
+
this.storeList = res.data.storesData;
|
|
11112
|
+
this.stores = res.data.storesData;
|
|
11113
|
+
this.galleryForm.get('storeList')?.setValue(this.storeList);
|
|
11114
|
+
}
|
|
11115
|
+
}
|
|
11116
|
+
});
|
|
11117
|
+
}
|
|
11118
|
+
else {
|
|
11119
|
+
this.galleryForm.get('stores')?.setValue([]);
|
|
11120
|
+
this.galleryForm.get('filtertype')?.setValue('Teams');
|
|
11121
|
+
let teamsList = this.galleryForm.value.TeamsList.map((data) => data.teamName);
|
|
11122
|
+
this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
|
|
11123
|
+
next: (res) => {
|
|
11124
|
+
if (res && res.code == 200) {
|
|
11125
|
+
this.userList = res.data;
|
|
11126
|
+
this.galleryForm.get('userList')?.setValue(this.userList);
|
|
11127
|
+
}
|
|
11128
|
+
}
|
|
11129
|
+
});
|
|
11130
|
+
}
|
|
11131
|
+
}
|
|
11058
11132
|
checklistNamechange(event, type) {
|
|
11059
11133
|
this.removeQueryParams();
|
|
11060
11134
|
if (event.checkListType === "AI") {
|
|
@@ -11450,9 +11524,23 @@ class GalleryComponent {
|
|
|
11450
11524
|
});
|
|
11451
11525
|
}
|
|
11452
11526
|
createMultipleTask(type) {
|
|
11527
|
+
console.log(this.selectedStores, this.selectedUsers);
|
|
11528
|
+
const isCluster = this.galleryForm.value.filtertype === 'Clusters';
|
|
11529
|
+
const isRedo = type === 'redo';
|
|
11530
|
+
const filterFn = (ele) => this.checktodayDate(ele.date_string) &&
|
|
11531
|
+
(isRedo ? !ele.redo : ele.taskId === null);
|
|
11532
|
+
if (isCluster) {
|
|
11533
|
+
this.selectedStores = this.selectedStores.filter(filterFn);
|
|
11534
|
+
}
|
|
11535
|
+
else {
|
|
11536
|
+
this.selectedUsers = this.selectedUsers.filter(filterFn);
|
|
11537
|
+
}
|
|
11538
|
+
console.log(this.selectedStores, this.selectedUsers);
|
|
11453
11539
|
const modalRef = this.modalService.open(BulkcreationmodelComponent, {
|
|
11454
11540
|
centered: true,
|
|
11455
|
-
size:
|
|
11541
|
+
size: "lg",
|
|
11542
|
+
windowClass: 'my-own-styles',
|
|
11543
|
+
backdrop: 'static',
|
|
11456
11544
|
});
|
|
11457
11545
|
modalRef.componentInstance.type = type;
|
|
11458
11546
|
modalRef.componentInstance.filtertype = this.galleryForm.value.filtertype;
|
|
@@ -11476,20 +11564,12 @@ class GalleryComponent {
|
|
|
11476
11564
|
refImage: this.refImage,
|
|
11477
11565
|
checklistName: this.galleryForm.value.checklistName,
|
|
11478
11566
|
};
|
|
11567
|
+
console.log(this.selectedStores.length);
|
|
11479
11568
|
modalRef.result.then((result) => {
|
|
11480
11569
|
this.selectedStores = [];
|
|
11481
11570
|
this.selectedUsers = [];
|
|
11482
11571
|
if (result == 'submit') {
|
|
11483
|
-
this.
|
|
11484
|
-
this.showmulti = true;
|
|
11485
|
-
if (this.galleryForm.value.type === 'checklist') {
|
|
11486
|
-
this.getChecklistQA(false);
|
|
11487
|
-
}
|
|
11488
|
-
else {
|
|
11489
|
-
this.getTaskQA(this.galleryForm.value.type);
|
|
11490
|
-
}
|
|
11491
|
-
}
|
|
11492
|
-
else {
|
|
11572
|
+
this.selectAllTask = false;
|
|
11493
11573
|
this.showsingle = false;
|
|
11494
11574
|
this.showmulti = true;
|
|
11495
11575
|
if (this.galleryForm.value.type === 'checklist') {
|
|
@@ -11508,11 +11588,6 @@ class GalleryComponent {
|
|
|
11508
11588
|
console.log(answer);
|
|
11509
11589
|
if (event.target.checked) {
|
|
11510
11590
|
this.selectAllTask = event.target.checked;
|
|
11511
|
-
console.log(this.viewChecklistsData);
|
|
11512
|
-
this.viewChecklistsData.checklistAnswers.map((details) => {
|
|
11513
|
-
details.questionAnswer[0].questions[0].checked = true;
|
|
11514
|
-
});
|
|
11515
|
-
console.log(this.viewChecklistsData);
|
|
11516
11591
|
this.inputDataTask = data;
|
|
11517
11592
|
this.refImage = [...this.refImage, ...answer];
|
|
11518
11593
|
console.log(this.refImage);
|
|
@@ -11540,69 +11615,55 @@ class GalleryComponent {
|
|
|
11540
11615
|
"filter": this.galleryForm.value.filter,
|
|
11541
11616
|
"approveFilter": this.approveFilter,
|
|
11542
11617
|
};
|
|
11543
|
-
|
|
11544
|
-
|
|
11545
|
-
|
|
11546
|
-
|
|
11547
|
-
|
|
11548
|
-
|
|
11549
|
-
|
|
11550
|
-
|
|
11551
|
-
|
|
11552
|
-
|
|
11553
|
-
|
|
11554
|
-
|
|
11555
|
-
|
|
11556
|
-
|
|
11557
|
-
|
|
11558
|
-
|
|
11559
|
-
|
|
11560
|
-
|
|
11561
|
-
|
|
11562
|
-
|
|
11563
|
-
|
|
11564
|
-
|
|
11565
|
-
|
|
11566
|
-
|
|
11567
|
-
|
|
11568
|
-
|
|
11569
|
-
|
|
11570
|
-
|
|
11571
|
-
|
|
11572
|
-
|
|
11573
|
-
|
|
11574
|
-
|
|
11575
|
-
|
|
11576
|
-
|
|
11577
|
-
console.log(res.data);
|
|
11578
|
-
res.data.checklistAnswers.forEach((ele) => {
|
|
11579
|
-
if (this.galleryForm.value.filtertype === 'Clusters') {
|
|
11580
|
-
this.selectedStores.push({
|
|
11581
|
-
storeName: ele.storeProfile.storeName,
|
|
11582
|
-
storeId: ele.storeProfile.store_id,
|
|
11583
|
-
userEmail: ele.storeProfile.userEmail,
|
|
11584
|
-
checklistId: ele.checklistInfo.checklistId,
|
|
11585
|
-
section_id: sectionInfo.section_id,
|
|
11586
|
-
uniqueNo: data.uniqueNo
|
|
11587
|
-
});
|
|
11618
|
+
this.traxService.getallchecklist(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
|
|
11619
|
+
next: (res) => {
|
|
11620
|
+
if (res && res.code === 200) {
|
|
11621
|
+
this.totalrecordcount = res.data.storesDetails.length;
|
|
11622
|
+
this.selectedRecordCount = res.data.storesDetails.length;
|
|
11623
|
+
res.data.storesDetails.forEach((ele) => {
|
|
11624
|
+
if (!ele.approvalStatus) {
|
|
11625
|
+
if (!ele.redo || !ele.taskId) {
|
|
11626
|
+
if (this.galleryForm.value.filtertype === 'Clusters') {
|
|
11627
|
+
this.selectedStores.push({
|
|
11628
|
+
storeName: ele.storeName,
|
|
11629
|
+
storeId: ele.store_id,
|
|
11630
|
+
userEmail: ele.userEmail,
|
|
11631
|
+
checklistId: ele.checklistId,
|
|
11632
|
+
section_id: ele.section_id,
|
|
11633
|
+
uniqueNo: data.uniqueNo,
|
|
11634
|
+
userName: ele.userName,
|
|
11635
|
+
date_string: ele.date_string,
|
|
11636
|
+
taskId: ele.taskId ? ele.taskId : null,
|
|
11637
|
+
redo: ele.redo
|
|
11638
|
+
});
|
|
11639
|
+
}
|
|
11640
|
+
else {
|
|
11641
|
+
this.selectedUsers.push({
|
|
11642
|
+
userEmail: ele.userEmail,
|
|
11643
|
+
checklistId: ele.checklistId,
|
|
11644
|
+
section_id: ele.section_id,
|
|
11645
|
+
uniqueNo: data.uniqueNo,
|
|
11646
|
+
userName: ele.userName,
|
|
11647
|
+
date_string: ele.date_string,
|
|
11648
|
+
taskId: ele.taskId ? ele.taskId : null,
|
|
11649
|
+
redo: ele.redo
|
|
11650
|
+
});
|
|
11651
|
+
}
|
|
11588
11652
|
}
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
11592
|
-
|
|
11593
|
-
checklistId: ele.checklistInfo.checklistId,
|
|
11594
|
-
section_id: sectionInfo.section_id,
|
|
11595
|
-
uniqueNo: data.uniqueNo
|
|
11596
|
-
});
|
|
11653
|
+
}
|
|
11654
|
+
this.viewChecklistsData.checklistAnswers.map((details) => {
|
|
11655
|
+
if (res.data.storesDetails.filter((ele) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
|
|
11656
|
+
details.questionAnswer[0].questions[0].checked = true;
|
|
11597
11657
|
}
|
|
11598
11658
|
});
|
|
11599
|
-
}
|
|
11659
|
+
});
|
|
11600
11660
|
}
|
|
11601
|
-
}
|
|
11602
|
-
}
|
|
11661
|
+
}
|
|
11662
|
+
});
|
|
11603
11663
|
}
|
|
11604
11664
|
else {
|
|
11605
11665
|
this.selectAllTask = false;
|
|
11666
|
+
this.selectedRecordCount = 0;
|
|
11606
11667
|
this.viewChecklistsData.checklistAnswers.map((details) => {
|
|
11607
11668
|
details.questionAnswer[0].questions[0].checked = false;
|
|
11608
11669
|
});
|
|
@@ -11616,7 +11677,7 @@ class GalleryComponent {
|
|
|
11616
11677
|
}
|
|
11617
11678
|
}
|
|
11618
11679
|
}
|
|
11619
|
-
|
|
11680
|
+
selectmultiTask(event, checklist, data, checklistInfo, sectionInfo) {
|
|
11620
11681
|
console.log(data);
|
|
11621
11682
|
let answer = [];
|
|
11622
11683
|
answer = data.userAnswer.map((data) => data.answer);
|
|
@@ -11629,28 +11690,33 @@ class GalleryComponent {
|
|
|
11629
11690
|
sectionInfo: sectionInfo,
|
|
11630
11691
|
};
|
|
11631
11692
|
if (this.galleryForm.value.filtertype === 'Clusters') {
|
|
11632
|
-
console.log(checklist.
|
|
11693
|
+
console.log(checklist.checklistInfo);
|
|
11633
11694
|
this.selectedStores.push({
|
|
11634
11695
|
section_id: sectionInfo.section_id,
|
|
11635
11696
|
storeId: checklist.storeProfile.store_id,
|
|
11636
11697
|
storeName: checklist.storeProfile.storeName,
|
|
11637
11698
|
checklistId: checklistInfo.checklistId,
|
|
11638
11699
|
userEmail: checklist.checklistInfo.userEmail,
|
|
11639
|
-
uniqueNo: data.uniqueNo
|
|
11700
|
+
uniqueNo: data.uniqueNo,
|
|
11701
|
+
taskId: checklistInfo.taskId ? checklistInfo.taskId : null,
|
|
11702
|
+
redo: checklistInfo.redo,
|
|
11703
|
+
date_string: dayjs(checklist.checklistInfo.date, "DD MMM YYYY").format("YYYY-MM-DD")
|
|
11640
11704
|
});
|
|
11641
11705
|
}
|
|
11642
11706
|
else {
|
|
11643
11707
|
this.selectedUsers.push({
|
|
11644
11708
|
section_id: sectionInfo.section_id,
|
|
11645
11709
|
userEmail: checklist.checklistInfo.userEmail,
|
|
11646
|
-
userName: checklist.checklistInfo.
|
|
11710
|
+
userName: checklist.checklistInfo.submittedBy,
|
|
11647
11711
|
checklistId: checklistInfo.checklistId,
|
|
11648
|
-
uniqueNo: data.uniqueNo
|
|
11712
|
+
uniqueNo: data.uniqueNo,
|
|
11713
|
+
taskId: checklistInfo.taskId ? checklistInfo.taskId : null,
|
|
11714
|
+
redo: checklistInfo.redo,
|
|
11715
|
+
date_string: dayjs(checklist.checklistInfo.date, "DD MMM YYYY").format("YYYY-MM-DD")
|
|
11649
11716
|
});
|
|
11650
11717
|
}
|
|
11651
11718
|
}
|
|
11652
11719
|
else {
|
|
11653
|
-
console.log(this.selectedStores);
|
|
11654
11720
|
this.refImage = this.refImage.filter((data) => data.answer);
|
|
11655
11721
|
if (this.galleryForm.value.filtertype === 'Clusters') {
|
|
11656
11722
|
this.selectedStores = this.selectedStores.filter((data) => data.checklistId != checklistInfo.checklistId);
|
|
@@ -11658,7 +11724,14 @@ class GalleryComponent {
|
|
|
11658
11724
|
else {
|
|
11659
11725
|
this.selectedUsers = this.selectedUsers.filter((data) => data.checklistId != checklistInfo.checklistId);
|
|
11660
11726
|
}
|
|
11727
|
+
console.log(checklistInfo.checklistId);
|
|
11728
|
+
console.log(this.selectedStores);
|
|
11661
11729
|
}
|
|
11730
|
+
this.selectedRecordCount = this.galleryForm.value.filtertype === 'Clusters'
|
|
11731
|
+
? this.selectedStores.length
|
|
11732
|
+
: this.selectedUsers.length;
|
|
11733
|
+
this.selectAllTask = this.totalrecordcount === this.selectedRecordCount;
|
|
11734
|
+
console.log(this.selectedRecordCount, this.totalrecordcount);
|
|
11662
11735
|
}
|
|
11663
11736
|
selectsinglequestion() {
|
|
11664
11737
|
this.selectedStores = [];
|
|
@@ -12407,9 +12480,10 @@ class GalleryComponent {
|
|
|
12407
12480
|
taskredirect(question, storeProfile, checklistInfo) {
|
|
12408
12481
|
if (storeProfile?.store_id && storeProfile?.store_id != '') {
|
|
12409
12482
|
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
|
|
12483
|
+
//question.taskDate ? question.taskDate : checklistInfo.date as per gowri told
|
|
12410
12484
|
this.router.navigate(['/manage/trax/gallery'], {
|
|
12411
12485
|
queryParams: {
|
|
12412
|
-
ChecklistDate: dayjs(
|
|
12486
|
+
ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
|
|
12413
12487
|
storeId: storeProfile?.store_id,
|
|
12414
12488
|
checklistType: "task",
|
|
12415
12489
|
sourceCheckList_id: question.taskId,
|
|
@@ -12423,7 +12497,7 @@ class GalleryComponent {
|
|
|
12423
12497
|
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
|
|
12424
12498
|
this.router.navigate(['/manage/trax/gallery'], {
|
|
12425
12499
|
queryParams: {
|
|
12426
|
-
ChecklistDate: dayjs(
|
|
12500
|
+
ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
|
|
12427
12501
|
userEmail: storeProfile?.userEmail,
|
|
12428
12502
|
checklistType: "task",
|
|
12429
12503
|
sourceCheckList_id: question.taskId,
|
|
@@ -12684,11 +12758,11 @@ class GalleryComponent {
|
|
|
12684
12758
|
document.body.removeChild(a);
|
|
12685
12759
|
}
|
|
12686
12760
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: i1.FormBuilder }, { token: i2$2.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i2.NgbModal }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i6.Location }, { token: i2$2.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n <!-- toast card starts -->\r\n <div class=\"toastcard col-md-12 mb-4\">\r\n <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n <span class=\"align-items-start\">\r\n <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n <path\r\n d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n </svg>\r\n </span>New Detection Found! Refresh Now to view new detection</span>\r\n </span>\r\n <button (click)=\"refreshnow()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12165_62781)\">\r\n <path\r\n d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12165_62781\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [autoApply]=\"true\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n </div>\r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n\r\n <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n Select Teams\r\n </div>\r\n <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n Select users\r\n </div>\r\n <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('userList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"adults\">Adults</option>\r\n <option value=\"kids\">Kids</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"rejected\">Breached</option>\r\n <option value=\"approved\">Not-breached</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\"\r\n *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n Select Zone\r\n </div>\r\n <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Approved\">Approved</option>\r\n <option value=\"notapproved\">Not-Approved</option>\r\n </select>\r\n </div>\r\n <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n </span>\r\n <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n </span>\r\n\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</span></a> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"card my-2\">\r\n <div class=\"row main-container my-5 \">\r\n\r\n <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n <div class=\"position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData&&select === 'custom' || noData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-75 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\"\r\n *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n class=\"btn btn-primary w-25 btn-resize\"\r\n (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\"\r\n style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n {{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\"\r\n class=\"d-flex my-2 q-btn\" cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n (click)=\"selectedQuestion($event,section,question)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"combinedChecklist.includes(select)\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \"\r\n [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\"\r\n [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\"\r\n [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\"\r\n *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n <div class=\"position-relative \">\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n \r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"form-check-label ms-2\" for=\"flexCheckDefault\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\">Create Task</button>\r\n\r\n </div>\r\n \r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n </div>\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">\r\n {{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item)\"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n\r\n </ul>\r\n\r\n </div>\r\n\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n Name:</h3>\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n </h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n <div class=\"row px-10\">\r\n\r\n <div *ngFor=\"let section of checklist.questionAnswer\">\r\n\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n View in detail\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 m-3\" >\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&!question.task&&!question.taskId&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo\"\r\n (click)=\"selectedmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <!-- checklist type with single image but inside collage-grid -->\r\n <div class=\"col-md-6\">\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div>\r\n <div class=\"col-md-6\"> -->\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div\r\n [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <span class=\"remarksTxt\"\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-3\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.answer)\"\r\n title=\"Download Video\" id=\"download-icon\"\r\n width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6 dfdsfsd\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n class=\"collage-tile\">\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3 \"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img *ngIf=\"item.validationType==='Capture Image'\"\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n </ul>\r\n\r\n\r\n <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n <!-- Prev Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n (click)=\"navigateImage('prev')\"\r\n [disabled]=\"currentImageIndex === 0\">\r\n \u2039\r\n </button>\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n <!-- Next Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n (click)=\"navigateImage('next')\"\r\n [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n \u203A\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n class=\"font-task\">View Task</span></button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"imageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <!-- <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div> -->\r\n\r\n <div class=\" my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n <h3 class=\"uni-title\">Average Downtime</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li> -->\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n Time:<span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_person_count\">Number of\r\n People Interacted :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n spent:<span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"videoChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n <div class=\"my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\">\r\n\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side\"\r\n *ngIf=\"select!=='suspiciousactivity'\">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:<span\r\n class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <h3 class=\"uni-title\">Configured Time</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <h3 class=\"uni-title\">Duration</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n <path\r\n d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></p>\r\n </div>\r\n </div>\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <!-- <span class=\"me-3 store-title\">{{item.storeName}}</span> -->\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_id\">Cust ID :\r\n {{detection.customer_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID :\r\n {{detection.queue_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID :\r\n {{detection.optum_id}}</span>\r\n <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.temp_id\">TempId :\r\n {{detection.temp_id}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend :\r\n {{detection.time_spend}}Mins</span>\r\n\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time :\r\n {{detection.entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time :\r\n {{detection.exit_time}}</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n {{detection.adherence_rate}}</span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\">\r\n {{detection.category}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n {{detection.customer_exit_time}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n alt=\"\">\r\n </video>\r\n </div>\r\n <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.EyeTestCDN}}{{detection.video_path}}\" alt=\"\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!item?.Flag\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n </div>\r\n </div>\r\n <div class=\"snapcard\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n alt=\"open close snap\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\"\r\n *ngIf=\"!item.closeTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"boximageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{store?.storeName}} |\r\n {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n </div>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <h3 class=\"uni-title\">Description:</h3>\r\n </div>\r\n <div class=\"col-md-9\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row m-0 w-100 \">\r\n <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"card bordercolor bg-secondary mt-8\">\r\n <div class=\"text-start ms-5 mt-2 mb-5\">\r\n <div *ngIf=\"item.zone\">\r\n <span\r\n class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n </div>\r\n\r\n <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n </div>\r\n <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n [pageSize]=\"limit\" (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n </button>\r\n </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-8\">\r\n <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n <div>\r\n <div class=\"text-start mt-2\">\r\n <div *ngIf=\"viewImage.zone\">\r\n <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.emptyBoxCount\">\r\n <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"viewImage.entry_time\">\r\n <span>Entry Time : {{viewImage.entry_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.exit_time\">\r\n <span>Exit Time : {{viewImage.exit_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.temp_id\">\r\n <span>Temp Id : {{viewImage.temp_id}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.time_spend\">\r\n <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n </div>\r\n <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n </div>\r\n\r\n </div>\r\n <div data-bs-dismiss=\"modal\">\r\n <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X {{camera.width}}</span> -->\r\n <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</ng-template>", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: CustomsingleSelectComponent, selector: "lib-single-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
12761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n <!-- toast card starts -->\r\n <div class=\"toastcard col-md-12 mb-4\">\r\n <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n <span class=\"align-items-start\">\r\n <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n <path\r\n d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n </svg>\r\n </span>New Detection Found! Refresh Now to view new detection</span>\r\n </span>\r\n <button (click)=\"refreshnow()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12165_62781)\">\r\n <path\r\n d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12165_62781\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [autoApply]=\"true\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n </div>\r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n\r\n <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n Select Teams\r\n </div>\r\n <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n Select users\r\n </div>\r\n <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('userList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"adults\">Adults</option>\r\n <option value=\"kids\">Kids</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"rejected\">Breached</option>\r\n <option value=\"approved\">Not-breached</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\"\r\n *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n Select Zone\r\n </div>\r\n <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Approved\">Approved</option>\r\n <option value=\"notapproved\">Not-Approved</option>\r\n </select>\r\n </div>\r\n <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n </span>\r\n <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n </span>\r\n\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</span></a> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"card my-2\">\r\n <div class=\"row main-container my-5 \">\r\n\r\n <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n <div class=\"position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData&&select === 'custom' || noData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-75 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\"\r\n *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n class=\"btn btn-primary w-25 btn-resize\"\r\n (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\"\r\n style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n {{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\"\r\n class=\"d-flex my-2 q-btn\" cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n (click)=\"selectedQuestion($event,section,question)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"combinedChecklist.includes(select)\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \"\r\n [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\"\r\n [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\"\r\n [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\"\r\n *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n <div class=\"position-relative \">\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n \r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" (click)=\"createMultipleTask('task')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_12998_46304)\">\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 d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n <feOffset dy=\"1\"/>\r\n <feGaussianBlur stdDeviation=\"1\"/>\r\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span> \r\n \r\n </div>\r\n \r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_12998_46303)\">\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 <g clip-path=\"url(#clip0_12998_46303)\">\r\n <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n <feOffset dy=\"1\"/>\r\n <feGaussianBlur stdDeviation=\"1\"/>\r\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n </filter>\r\n <clipPath id=\"clip0_12998_46303\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n\r\n </div>\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">\r\n {{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item)\"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n\r\n </ul>\r\n\r\n </div>\r\n\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n Name:</h3>\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n </h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n <div class=\"row px-10\">\r\n\r\n <div *ngFor=\"let section of checklist.questionAnswer\">\r\n\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n View in detail\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 m-3\" >\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\" *ngIf=\"showsingle\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <!-- checklist type with single image but inside collage-grid -->\r\n <div class=\"col-md-6\">\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div>\r\n <div class=\"col-md-6\"> -->\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div\r\n [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <span class=\"remarksTxt\"\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-3\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.answer)\"\r\n title=\"Download Video\" id=\"download-icon\"\r\n width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6 dfdsfsd\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n class=\"collage-tile\">\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3 \"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img *ngIf=\"item.validationType==='Capture Image'\"\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n </ul>\r\n\r\n\r\n <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n <!-- Prev Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n (click)=\"navigateImage('prev')\"\r\n [disabled]=\"currentImageIndex === 0\">\r\n \u2039\r\n </button>\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n <!-- Next Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n (click)=\"navigateImage('next')\"\r\n [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n \u203A\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n class=\"font-task\">View Task</span></button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"imageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <!-- <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div> -->\r\n\r\n <div class=\" my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n <h3 class=\"uni-title\">Average Downtime</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li> -->\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n Time:<span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_person_count\">Number of\r\n People Interacted :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n spent:<span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"videoChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n <div class=\"my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\">\r\n\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side\"\r\n *ngIf=\"select!=='suspiciousactivity'\">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:<span\r\n class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <h3 class=\"uni-title\">Configured Time</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <h3 class=\"uni-title\">Duration</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n <path\r\n d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></p>\r\n </div>\r\n </div>\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <!-- <span class=\"me-3 store-title\">{{item.storeName}}</span> -->\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_id\">Cust ID :\r\n {{detection.customer_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID :\r\n {{detection.queue_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID :\r\n {{detection.optum_id}}</span>\r\n <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.temp_id\">TempId :\r\n {{detection.temp_id}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend :\r\n {{detection.time_spend}}Mins</span>\r\n\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time :\r\n {{detection.entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time :\r\n {{detection.exit_time}}</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n {{detection.adherence_rate}}</span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\">\r\n {{detection.category}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n {{detection.customer_exit_time}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n alt=\"\">\r\n </video>\r\n </div>\r\n <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.EyeTestCDN}}{{detection.video_path}}\" alt=\"\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!item?.Flag\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n </div>\r\n </div>\r\n <div class=\"snapcard\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n alt=\"open close snap\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\"\r\n *ngIf=\"!item.closeTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"boximageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{store?.storeName}} |\r\n {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n </div>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <h3 class=\"uni-title\">Description:</h3>\r\n </div>\r\n <div class=\"col-md-9\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row m-0 w-100 \">\r\n <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"card bordercolor bg-secondary mt-8\">\r\n <div class=\"text-start ms-5 mt-2 mb-5\">\r\n <div *ngIf=\"item.zone\">\r\n <span\r\n class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n </div>\r\n\r\n <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n </div>\r\n <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n [pageSize]=\"limit\" (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n </button>\r\n </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-8\">\r\n <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n <div>\r\n <div class=\"text-start mt-2\">\r\n <div *ngIf=\"viewImage.zone\">\r\n <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.emptyBoxCount\">\r\n <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"viewImage.entry_time\">\r\n <span>Entry Time : {{viewImage.entry_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.exit_time\">\r\n <span>Exit Time : {{viewImage.exit_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.temp_id\">\r\n <span>Temp Id : {{viewImage.temp_id}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.time_spend\">\r\n <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n </div>\r\n <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n </div>\r\n\r\n </div>\r\n <div data-bs-dismiss=\"modal\">\r\n <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X {{camera.width}}</span> -->\r\n <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</ng-template>", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: CustomsingleSelectComponent, selector: "lib-single-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
12688
12762
|
}
|
|
12689
12763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
|
|
12690
12764
|
type: Component,
|
|
12691
|
-
args: [{ selector: 'lib-gallery', template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n <!-- toast card starts -->\r\n <div class=\"toastcard col-md-12 mb-4\">\r\n <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n <span class=\"align-items-start\">\r\n <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n <path\r\n d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n </svg>\r\n </span>New Detection Found! Refresh Now to view new detection</span>\r\n </span>\r\n <button (click)=\"refreshnow()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12165_62781)\">\r\n <path\r\n d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12165_62781\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [autoApply]=\"true\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n </div>\r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n\r\n <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n Select Teams\r\n </div>\r\n <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n Select users\r\n </div>\r\n <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('userList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"adults\">Adults</option>\r\n <option value=\"kids\">Kids</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"rejected\">Breached</option>\r\n <option value=\"approved\">Not-breached</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\"\r\n *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n Select Zone\r\n </div>\r\n <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Approved\">Approved</option>\r\n <option value=\"notapproved\">Not-Approved</option>\r\n </select>\r\n </div>\r\n <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n </span>\r\n <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n </span>\r\n\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</span></a> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"card my-2\">\r\n <div class=\"row main-container my-5 \">\r\n\r\n <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n <div class=\"position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData&&select === 'custom' || noData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-75 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\"\r\n *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n class=\"btn btn-primary w-25 btn-resize\"\r\n (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\"\r\n style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n {{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\"\r\n class=\"d-flex my-2 q-btn\" cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n (click)=\"selectedQuestion($event,section,question)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"combinedChecklist.includes(select)\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \"\r\n [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\"\r\n [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\"\r\n [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\"\r\n *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n <div class=\"position-relative \">\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n \r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"form-check-label ms-2\" for=\"flexCheckDefault\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <button [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('task')\"\r\n class=\"btn btn-primary form-control no-text-transform\">Create Task</button>\r\n\r\n </div>\r\n \r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"selectedUsers.length==0&&selectedStores.length==0\"\r\n (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n </div>\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">\r\n {{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item)\"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n\r\n </ul>\r\n\r\n </div>\r\n\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n Name:</h3>\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n </h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n <div class=\"row px-10\">\r\n\r\n <div *ngFor=\"let section of checklist.questionAnswer\">\r\n\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n View in detail\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 m-3\" >\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&!question.task&&!question.taskId&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo\"\r\n (click)=\"selectedmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\">\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <!-- checklist type with single image but inside collage-grid -->\r\n <div class=\"col-md-6\">\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div>\r\n <div class=\"col-md-6\"> -->\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div\r\n [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <span class=\"remarksTxt\"\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-3\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.answer)\"\r\n title=\"Download Video\" id=\"download-icon\"\r\n width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6 dfdsfsd\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n class=\"collage-tile\">\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3 \"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img *ngIf=\"item.validationType==='Capture Image'\"\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n </ul>\r\n\r\n\r\n <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n <!-- Prev Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n (click)=\"navigateImage('prev')\"\r\n [disabled]=\"currentImageIndex === 0\">\r\n \u2039\r\n </button>\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n <!-- Next Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n (click)=\"navigateImage('next')\"\r\n [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n \u203A\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n class=\"font-task\">View Task</span></button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"imageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <!-- <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div> -->\r\n\r\n <div class=\" my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n <h3 class=\"uni-title\">Average Downtime</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li> -->\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n Time:<span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_person_count\">Number of\r\n People Interacted :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n spent:<span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"videoChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n <div class=\"my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\">\r\n\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side\"\r\n *ngIf=\"select!=='suspiciousactivity'\">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:<span\r\n class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <h3 class=\"uni-title\">Configured Time</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <h3 class=\"uni-title\">Duration</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n <path\r\n d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></p>\r\n </div>\r\n </div>\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <!-- <span class=\"me-3 store-title\">{{item.storeName}}</span> -->\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_id\">Cust ID :\r\n {{detection.customer_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID :\r\n {{detection.queue_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID :\r\n {{detection.optum_id}}</span>\r\n <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.temp_id\">TempId :\r\n {{detection.temp_id}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend :\r\n {{detection.time_spend}}Mins</span>\r\n\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time :\r\n {{detection.entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time :\r\n {{detection.exit_time}}</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n {{detection.adherence_rate}}</span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\">\r\n {{detection.category}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n {{detection.customer_exit_time}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n alt=\"\">\r\n </video>\r\n </div>\r\n <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.EyeTestCDN}}{{detection.video_path}}\" alt=\"\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!item?.Flag\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n </div>\r\n </div>\r\n <div class=\"snapcard\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n alt=\"open close snap\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\"\r\n *ngIf=\"!item.closeTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"boximageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{store?.storeName}} |\r\n {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n </div>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <h3 class=\"uni-title\">Description:</h3>\r\n </div>\r\n <div class=\"col-md-9\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row m-0 w-100 \">\r\n <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"card bordercolor bg-secondary mt-8\">\r\n <div class=\"text-start ms-5 mt-2 mb-5\">\r\n <div *ngIf=\"item.zone\">\r\n <span\r\n class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n </div>\r\n\r\n <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n </div>\r\n <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n [pageSize]=\"limit\" (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n </button>\r\n </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-8\">\r\n <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n <div>\r\n <div class=\"text-start mt-2\">\r\n <div *ngIf=\"viewImage.zone\">\r\n <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.emptyBoxCount\">\r\n <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"viewImage.entry_time\">\r\n <span>Entry Time : {{viewImage.entry_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.exit_time\">\r\n <span>Exit Time : {{viewImage.exit_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.temp_id\">\r\n <span>Temp Id : {{viewImage.temp_id}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.time_spend\">\r\n <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n </div>\r\n <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n </div>\r\n\r\n </div>\r\n <div data-bs-dismiss=\"modal\">\r\n <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X {{camera.width}}</span> -->\r\n <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</ng-template>", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}\n"] }]
|
|
12765
|
+
args: [{ selector: 'lib-gallery', template: "<div *ngIf=\"notifyCount>0\" class=\"h-xl-100 flex-row flex-stack flex-wrap p-2\">\r\n <!-- toast card starts -->\r\n <div class=\"toastcard col-md-12 mb-4\">\r\n <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n <span class=\"align-items-start\">\r\n <span class=\"toasttext d-block\"><span class=\"me-5\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n <path\r\n d=\"M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"13\" cy=\"3.5\" r=\"3\" fill=\"#F04438\" />\r\n </svg>\r\n </span>New Detection Found! Refresh Now to view new detection</span>\r\n </span>\r\n <button (click)=\"refreshnow()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12165_62781)\">\r\n <path\r\n d=\"M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12165_62781\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"refreshtext ms-2\"></span> Refresh Now </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"gallery-card po\">\r\n <div class=\"header mb-4\">Gallery</div>\r\n\r\n <form [formGroup]=\"galleryForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"position-relative\">\r\n <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [ngModelOptions]=\"{standalone: true}\"\r\n (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [autoApply]=\"true\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-4 mb-4\">\r\n <lib-single-select [items]=\"checklists\" [multi]=\"false\" [searchField]=\"'checkListName'\"\r\n [idField]=\"'_id'\" (selected)=\"checklistNamechange($event,false)\"\r\n [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-single-select>\r\n </div>\r\n <div class=\"col-md-3 mb-4\">\r\n <lib-reactive-select formControlName=\"answerType\" [isDisabled]=\"!showflag\" [idField]=\"'value'\"\r\n [nameField]=\"'label'\" [data]=\"answerType\"></lib-reactive-select>\r\n </div>\r\n <div class=\"col-md-2 mb-4\">\r\n\r\n <lib-reactive-select formControlName=\"filtertype\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"filtertype\" (itemChange)=\"filterChange($event)\"></lib-reactive-select>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('TeamsList')?.value?.length)\">\r\n Select Teams\r\n </div>\r\n <lib-group-select [items]=\"TeamsList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'teamName'\" [idField]=\"'teamName'\" (selected)=\"onTeamsSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('TeamsList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Clusters'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n Select Stores\r\n </div>\r\n <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'storeName'\" [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3 mb-4\" *ngIf=\"galleryForm.get('filtertype')?.value ==='Teams'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('userList')?.value?.length)\">\r\n Select users\r\n </div>\r\n <lib-stores-select [items]=\"userList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'userName'\" [idField]=\"'userName'\" (selected)=\"onUserSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('userList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <div class=\"d-flex justify-content-end\">\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'eyetest'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"adults\">Adults</option>\r\n <option value=\"kids\">Kids</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100\" *ngIf=\"select === 'cleaning'||select ==='scrum'\">\r\n <select class=\"form-select\" [(ngModel)]=\"category\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"rejected\">Breached</option>\r\n <option value=\"approved\">Not-breached</option>\r\n </select>\r\n </div>\r\n <div class=\"me-5 w-100 text-start\" *ngIf=\"select === 'queuealert'\">\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\"\r\n *ngIf=\"!(galleryForm.get('zoneList')?.value?.length)\">\r\n Select Zone\r\n </div>\r\n <lib-stores-select [items]=\"zoneList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'value'\" [idField]=\"'key'\" (selected)=\"onzoneSelect($event)\"\r\n [selectedValues]=\"galleryForm.get('zoneList')?.value\"></lib-stores-select>\r\n </div>\r\n </div>\r\n <div class=\"me-5 w-50\" *ngIf=\"showflag\">\r\n <select class=\"form-select\" (change)=\"approveFilterChange($event)\"\r\n [(ngModel)]=\"approveFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <option value=\"all\">All</option>\r\n <option value=\"Approved\">Approved</option>\r\n <option value=\"notapproved\">Not-Approved</option>\r\n </select>\r\n </div>\r\n <span class=\"me-4 mt-3\" *ngIf=\"showflag\">\r\n <input formControlName=\"viewRedo\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n <label class=\"checkbox-label\" for=\"viewRedo\">Re-do</label>\r\n </span>\r\n <span class=\"me-3 mt-3\" *ngIf=\"showflag&&galleryForm.value.type==='checklist'\">\r\n <input formControlName=\"viewFlag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n <label class=\"checkbox-label\" for=\"viewFlag\">Flag</label>\r\n </span>\r\n\r\n <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n <!-- <a (click)=\"notify([])\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>test</span></a> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </form>\r\n</div>\r\n<div class=\"card my-2\">\r\n <div class=\"row main-container my-5 \">\r\n\r\n <div [ngClass]=\"showsidenav ? 'col-md-4 left-sidebar':'d-none'\" class=\"h-650px\">\r\n <div class=\"position-relative h-650px scroll-y\">\r\n <div class=\"card-body p-5\">\r\n <div class=\"checklist-left\">\r\n <div class=\"checklist-title\">{{checklistName}}</div>\r\n <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData&&select === 'custom' || noData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"w-75 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mt-0\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section *ngIf=\"!noData && !loading\">\r\n\r\n <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n <div class=\"text-end mt-10\">\r\n <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\"\r\n *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n (click)=\"onchecklistreset()\"> Reset </button>\r\n <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\"\r\n class=\"btn btn-primary w-25 btn-resize\"\r\n (click)=\"selectsinglequestion()\">Apply</button>\r\n </div>\r\n <div class=\"my-6\" [ngClass]=\"selectedSection.length===0 ? 'view-all':'view-questions'\"\r\n style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n View All Answers\r\n </div>\r\n <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n <div class=\"d-flex align-items-center justify-content-between mt-4\"\r\n style=\"cursor: pointer;\" (click)=\"accordian(i)\">\r\n <div class=\"fs-4 fw-bold section\" *ngIf=\"galleryForm.value.type==='checklist'\">\r\n {{section.sectionName}}</div>\r\n <hr class=\"mx-2\">\r\n <svg class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <div *ngIf=\"show===i\" class=\"question-left\">\r\n <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n <div *ngFor=\"let question of section.questions;let j=index;\"\r\n class=\"d-flex my-2 q-btn\" cdkDrag>\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n (click)=\"selectedQuestion($event,section,question)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\" type=\"checkbox\">\r\n <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\"\r\n style=\"cursor: pointer;\">\r\n {{question.qno}} . {{question.qname}}\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div *ngIf=\"combinedChecklist.includes(select)\">\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset\r\n </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"onview()\">Apply</button>\r\n </div>\r\n <div class=\"dropdownselect h-900px scroll-y\">\r\n <div class=\"d-flex justify-content-left \"\r\n [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n <input class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"\r\n [(ngModel)]=\"selectAll\" (click)=\"selectAllStore($event)\"> <span\r\n [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n </div>\r\n <!-- dropdownbg -->\r\n <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n <div (change)=\"updateCheck($event,list)\"\r\n [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"\r\n type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n <label for=\"label{{i}}\"\r\n [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\">{{list?.storeName}}</label>\r\n <span class=\"badge badge-light-primary detectionright\"\r\n *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'\">\r\n <div class=\"position-relative \">\r\n <div class=\"card-header border-0 px-0 my-0\"\r\n *ngIf=\"(select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') && !viewloading && !viewnoData\">\r\n <h3 *ngIf=\"!showsingle || (gs.userAccess | async)?.userType === 'tango'\"></h3>\r\n \r\n <div class=\" m-3\"\r\n *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&approvalStatus\">\r\n <div class=\"form-check\">\r\n <input [(ngModel)]=\"selectAllTask\"\r\n (click)=\"selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])\"\r\n class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n <label class=\"ms-2\" for=\"flexCheckDefault\">\r\n Select All <span *ngIf=\"selectedRecordCount\" >({{selectedRecordCount}} Records Selected)</span>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div class=\"card-toolbar\" *ngIf=\"!galleryForm.value.viewRedo\">\r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'&&this.galleryForm.value.type!=='task'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" (click)=\"createMultipleTask('task')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_12998_46304)\">\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 d=\"M23.6654 12.666H16.9987C16.5567 12.666 16.1327 12.8416 15.8202 13.1542C15.5076 13.4667 15.332 13.8907 15.332 14.3327V27.666C15.332 28.108 15.5076 28.532 15.8202 28.8445C16.1327 29.1571 16.5567 29.3327 16.9987 29.3327H26.9987C27.4407 29.3327 27.8646 29.1571 28.1772 28.8445C28.4898 28.532 28.6654 28.108 28.6654 27.666V17.666M23.6654 12.666L28.6654 17.666M23.6654 12.666V17.666H28.6654M21.9987 25.9993V20.9993M19.4987 23.4993H24.4987\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_12998_46304\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n <feOffset dy=\"1\"/>\r\n <feGaussianBlur stdDeviation=\"1\"/>\r\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46304\"/>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46304\" result=\"shape\"/>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span> \r\n \r\n </div>\r\n \r\n <div class=\"me-4\" *ngIf=\"showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType != 'tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType != 'tango'\">\r\n <span *ngIf=\"selectedUsers.length>0||selectedStores.length>0\" (click)=\"createMultipleTask('redo')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_12998_46303)\">\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 <g clip-path=\"url(#clip0_12998_46303)\">\r\n <path d=\"M31.1654 14.3333V19.3333M31.1654 19.3333H26.1654M31.1654 19.3333L27.2987 15.7C26.4031 14.8039 25.2951 14.1493 24.078 13.7973C22.861 13.4453 21.5746 13.4073 20.3389 13.6869C19.1033 13.9665 17.9585 14.5545 17.0116 15.3962C16.0646 16.2378 15.3463 17.3056 14.9237 18.5M12.832 27.6666V22.6666M12.832 22.6666H17.832M12.832 22.6666L16.6987 26.3C17.5943 27.1961 18.7023 27.8506 19.9194 28.2027C21.1364 28.5547 22.4228 28.5927 23.6585 28.3131C24.8941 28.0335 26.0389 27.4455 26.9858 26.6038C27.9328 25.7621 28.6511 24.6943 29.0737 23.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_12998_46303\" x=\"0\" y=\"0\" width=\"44\" height=\"44\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n <feOffset dy=\"1\"/>\r\n <feGaussianBlur stdDeviation=\"1\"/>\r\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_12998_46303\"/>\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_12998_46303\" result=\"shape\"/>\r\n </filter>\r\n <clipPath id=\"clip0_12998_46303\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(12 11)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n \r\n\r\n </div>\r\n <div class=\"position-relative cursor-pointer me-10\">\r\n <div class=\" btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n {{ exportLabel }} <!-- Bind label text here -->\r\n </div>\r\n <div *ngIf=\"exportShow\"\r\n class=\"card py-2 position-absolute productdrop top-10 w-150px end-0 z-1\">\r\n <ul class=\"list-unstyled mb-2\">\r\n <li class=\"cursor-pointer py-4 checkbox-label mx-2\"\r\n *ngIf=\"pdfExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n Export as PDF\r\n </li>\r\n <li class=\" cursor-pointer checkbox-label py-4 mx-2\"\r\n *ngIf=\"csvExportTypes.includes(select)\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n Export as CSV\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo'\"\r\n class=\" cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n Export as PPT\r\n </li>\r\n <li *ngIf=\"selectedSection.length>0||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'\"\r\n class=\"cursor-pointer checkbox-label py-4 mx-2\" type=\"button\"\r\n (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n Export as ZIP\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div>\r\n <div *ngIf=\"viewloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"viewnoData&&select !== 'custom'&&select !== 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata2.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No Detections found</div>\r\n <div class=\"nodata-sub\">There is no breaches for the selected period</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewnoData&&select === 'custom' || viewnoData&&select === 'task'\" class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-3\">\r\n <div\r\n class=\"card-body mt-20 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src mt-5 w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"!viewloading && !viewnoData\">\r\n <div *ngIf=\"select==='custom'||select==='task' \">\r\n <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">\r\n {{this.selectedSection[0]?.questions[0]}}</div>\r\n <div *ngIf=\"showsingle&&showfilter\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n <li class=\"nav-item\" *ngFor=\"let item of answerFilter\">\r\n <a (click)=\"taskTab(item)\"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n {{item.key}}<span class=\"mx-2 \"\r\n [ngClass]=\"galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'\">{{item.count}}</span>\r\n </a>\r\n </li>\r\n\r\n </ul>\r\n\r\n </div>\r\n\r\n <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''&&showmulti\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='checklist'\">Checklist\r\n Name:</h3>\r\n <h3 class=\"uni-title\" *ngIf=\"galleryForm.value.type==='task'\">Task Name:\r\n </h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n </div>\r\n\r\n <ng-container>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">State & Country :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n {{checklist?.storeProfile?.Country}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Duration :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">No. of Questions :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Date :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Submitted By :</h3>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <h3 class=\"uni-title\">Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n <div class=\"row px-10\">\r\n\r\n <div *ngFor=\"let section of checklist.questionAnswer\">\r\n\r\n <div class=\"qa-bodrer my-5\" *ngFor=\"let question of section.questions\">\r\n <div class=\"row\" *ngIf=\"question.redo||question.redo===false\">\r\n\r\n\r\n <div class=\"view-detail col-12 text-end cursor-pointer\"\r\n (click)=\"ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n View in detail\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 m-3\" >\r\n\r\n <div class=\"col-md-1\" style=\"width:3.3333%\" *ngIf=\"showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit\">\r\n <input id=\"label\" [(ngModel)]=\"question.checked\"\r\n [disabled]=\"question.redo&&question.task\"\r\n (click)=\"selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)\"\r\n class=\"form-check-input cursor-pointer mt-2 me-4\"\r\n type=\"checkbox\">\r\n </div>\r\n <div class=\"col-md-3 text-title\" *ngIf=\"showsingle\">\r\n {{checklist?.storeProfile?.storeName}}\r\n </div>\r\n <div class=\"col-md-8 text-end title-description\" *ngIf=\"showsingle\" >\r\n Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :\r\n {{checklist?.checklistInfo?.date}}\r\n {{checklist?.checklistInfo?.time}}\r\n </div>\r\n </div>\r\n <ul>\r\n <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}.\r\n {{question?.qname}}</li>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='descriptive'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <!-- checklist type with single image but inside collage-grid -->\r\n <div class=\"col-md-6\">\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div>\r\n <div class=\"col-md-6\"> -->\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='linearscale'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <br> -->\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='time'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='date'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <br>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='yes/no'\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <br\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==''&&question.questionReferenceImage!==null\">\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <span class=\"mt-4\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div\r\n [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <span class=\"remarksTxt\"\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :{{item.validationAnswer}}</span>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"Partially my-3 px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\">\r\n\r\n <span class=\"mt-2\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row\" *ngIf=\"question?.answerType==='image'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist'&& (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type==='checklist'&&question.questionReferenceImage!==null&&question.questionReferenceImage!==''&&question.questionReferenceImage!==undefined\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n <ng-container\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"Partially my-3 px-5\"\r\n *ngFor=\"let item of question.userAnswer\">\r\n <span class=\"mt-3\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\"\r\n *ngIf=\"item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'\">\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task'\">\r\n\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers\">\r\n <ng-container\r\n *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\" fill=\"white\">\r\n </rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\"\r\n height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer : {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i = index\"\r\n class=\"collage-tile\">\r\n\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6 mt-2':'col-md-12 mt-2'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img class=\"img-logo cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n *ngIf=\"item.validationType==='Capture Image'\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\"\r\n [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n <!-- Task: Multiple reference images (Array) -->\r\n <div class=\"col-md-6\"\r\n *ngIf=\"galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)\">\r\n <!-- Question Reference Images -->\r\n\r\n <div class=\"title-ref my-3\">Reference Image\r\n </div>\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }\">\r\n <ng-container\r\n *ngFor=\"let item of question.questionReferenceImage;let i=index\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"isValidImage(item)\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"Reference image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Checklist: Single reference image (String) -->\r\n <div class=\"col-md-6\" *ngIf=\"galleryForm.value.type === 'checklist' \r\n && question.questionReferenceImage \r\n && question.questionReferenceImage !== ''\">\r\n\r\n <div class=\"title-ref my-3\">Reference Image</div>\r\n\r\n <div class=\"collage-grid\"\r\n [ngStyle]=\"{ 'grid-template-columns': getGridColumns(1) }\">\r\n\r\n <div class=\"collage-tile\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)\"\r\n [src]=\"environment.TraxAnswerCDN + question.questionReferenceImage\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-12\" *ngFor=\"let item of question.userAnswer\">\r\n <div class=\"title-ref my-3\">Uploaded Video</div>\r\n <div class=\"position-relative w-100 h-450px p-3\">\r\n <video controls class=\"w-100 h-100\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n </video>\r\n\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.answer)\"\r\n title=\"Download Video\" id=\"download-icon\"\r\n width=\"44\" height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\"\r\n rx=\"8\" fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\"\r\n rx=\"7.5\" stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\"\r\n y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"></feColorMatrix>\r\n <feOffset dy=\"1\"></feOffset>\r\n <feGaussianBlur stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\"></feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">\r\n Remarks : {{question.remarks}}</div>\r\n </div>\r\n\r\n\r\n\r\n\r\n <div class=\"row px-5\"\r\n *ngIf=\"question?.answerType==='multipleImage'\">\r\n <div *ngIf=\"galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6 dfdsfsd\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasReferenceImages(question)\">\r\n <ng-container *ngFor=\"let answer of question.answers\">\r\n <ng-container *ngIf=\"answer.referenceImage?.length\">\r\n <div class=\"collage-tile\"\r\n *ngFor=\"let item of answer.referenceImage;let i=index\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)\"\r\n [src]=\"environment.TraxAnswerCDN + item\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- For Checklist Type -->\r\n <div *ngIf=\"galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))\"\r\n class=\"col-md-6\">\r\n <div class=\"title-ref my-3\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n Reference Image\r\n </div>\r\n\r\n <div class=\"collage-grid\"\r\n *ngIf=\"hasChecklistReferenceImages(question)\">\r\n <ng-container\r\n *ngFor=\"let answer of question.answers;let i=index;\">\r\n <div class=\"collage-tile\"\r\n *ngIf=\"answer.referenceImage\">\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)\"\r\n [src]=\"environment.TraxAnswerCDN + answer.referenceImage\"\r\n alt=\"\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div\r\n [ngClass]=\"hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'\">\r\n <div class=\"row\">\r\n <div class=\"title-ref my-3\">Uploaded Image</div>\r\n <div class=\"collage-grid\" [ngStyle]=\"{'grid-template-columns': getGridColumns(question.userAnswer.length),\r\n 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}\">\r\n <div *ngFor=\"let item of question.userAnswer;let i=index\"\r\n class=\"collage-tile\">\r\n\r\n <img class=\"cursor-pointer\"\r\n (click)=\"openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n alt=\"\">\r\n <div [ngClass]=\"item.validationType==='Capture Image'?'col-md-6':'col-md-12'\"\r\n *ngIf=\"item.validation&&item.validationAnswer!==''\">\r\n <div class=\"title-ref my-3 \"\r\n *ngIf=\"item.validationType==='Capture Image'||item.validationType==='Capture Video'\">\r\n Validation Answer</div>\r\n <img *ngIf=\"item.validationType==='Capture Image'\"\r\n class=\"cursor-pointer\"\r\n (click)=\"openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)\"\r\n src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n alt=\"\">\r\n <div class=\"position-relative w-100 h-450px p-3\"\r\n *ngIf=\"item.validationType === 'Capture Video'\">\r\n <video controls class=\"w-100 h-100\"\r\n [src]=\"environment.TraxAnswerCDN + item.validationAnswer\">\r\n </video>\r\n\r\n <span\r\n class=\"position-absolute top-0 end-0 m-3 cursor-pointer\">\r\n <svg (click)=\"downloadVideo(item.validationAnswer)\"\r\n title=\"Download Video\"\r\n id=\"download-icon\" width=\"44\"\r\n height=\"44\" viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g\r\n filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\"\r\n height=\"40\" rx=\"8\"\r\n fill=\"white\"></rect>\r\n <rect x=\"2.5\" y=\"1.5\"\r\n width=\"39\" height=\"39\"\r\n rx=\"7.5\"\r\n stroke=\"#D0D5DD\"></rect>\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\" y=\"0\" width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\">\r\n </feFlood>\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\">\r\n </feColorMatrix>\r\n <feOffset dy=\"1\">\r\n </feOffset>\r\n <feGaussianBlur\r\n stdDeviation=\"1\">\r\n </feGaussianBlur>\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\">\r\n </feColorMatrix>\r\n <feBlend mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\">\r\n </feBlend>\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\"\r\n result=\"shape\">\r\n </feBlend>\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <span\r\n *ngIf=\"item.validationType==='Descriptive Answer'\">Validation\r\n Answer :\r\n {{item.validationAnswer}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"remarksTxt\" *ngIf=\"question.remarks!==''\">Remarks :\r\n {{question.remarks}}</div>\r\n\r\n </div>\r\n\r\n </ul>\r\n\r\n\r\n <div class=\"modal fade my-0 py-0\" id=\"imageModal\" tabindex=\"-1\"\r\n role=\"dialog\" style=\"overflow:hidden\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n <!-- Prev Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3\"\r\n (click)=\"navigateImage('prev')\"\r\n [disabled]=\"currentImageIndex === 0\">\r\n \u2039\r\n </button>\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 85vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n <!-- Next Button -->\r\n <button *ngIf=\"imageList.length > 1\"\r\n class=\"btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3\"\r\n (click)=\"navigateImage('next')\"\r\n [disabled]=\"currentImageIndex === imageList.length - 1\">\r\n \u203A\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal fade\" id=\"imageModal1\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered modal-lg\"\r\n role=\"document\">\r\n <div class=\"modal-content \">\r\n\r\n\r\n\r\n <div\r\n class=\"modal-body d-flex align-items-center justify-content-center position-relative\">\r\n\r\n\r\n <!-- Image -->\r\n <img [src]=\"selectedImageUrl\"\r\n style=\"max-height: 95vh; max-width: 100%; object-fit: contain;\"\r\n class=\"img-fluid w-100 mx-1\" />\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-start\">\r\n <!-- <button class=\"btn btn-secondary rounded-pill m-0 p-2\" *ngIf=\"question?.linkType&&question?.linkquestionenabled\">Linked to Question {{question.parentQuestion}}</button> -->\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm btn-default border-default me-3\"\r\n [disabled]=\"question.redo\"\r\n *ngIf=\"checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6004_11734)\">\r\n <path\r\n d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\"\r\n stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6004_11734\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2 font-defult-task\">Redo</span>\r\n </button>\r\n\r\n <button class=\"btn btn-sm border-val1\"\r\n *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0\"\r\n (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 font-task\">Create Task</span>\r\n </button>\r\n <button\r\n *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\"\r\n class=\"btn btn-sm border-val1\"\r\n (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\"><span\r\n class=\"font-task\">View Task</span></button>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"imageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <!-- <div>\r\n <h2>Checklist Name : {{this.checklistName}}</h2>\r\n </div> -->\r\n\r\n <div class=\" my-3 mt-5\" *ngFor=\"let item of mobileusageData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item.down_time\">\r\n <h3 class=\"uni-title\">Average Downtime</h3>\r\n </div>\r\n <div class=\"col-md-9\" *ngIf=\"item.down_time\">\r\n <p class=\"uni-subtitle\">: {{item.down_time}} Mins</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 qa-bodrer\">\r\n <!-- <li class=\"qa-heading\">\r\n {{item.storeName}}\r\n </li> -->\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imageUrl\">\r\n\r\n <div class=\"\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item?.imagesData\">\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='inventorycount'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_count\">No of cars\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.car_count}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='numberplateinfo'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_license_id\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection.car_license_id}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Entry\r\n Time:<span class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='carsattended'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_person_count\">Number of\r\n People Interacted :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.interacted_person_count}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.car_reg_number\">Number\r\n Plate :<span class=\"badge badge-light-primary\">\r\n {{detection?.car_reg_number}}</span></span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.car_reg_number\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection?.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-6 text-end\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.interacted_duration_in_secs\">Time\r\n spent:<span class=\"badge badge-light-primary\">\r\n {{detection.interacted_duration_in_secs}}\r\n Mins</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\"\r\n *ngIf=\"galleryForm.value.sourceCheckList_id==='vehicle_check_in'\">\r\n <div class=\"row\">\r\n\r\n <div class=\"col-md-8\">\r\n <span class=\"ms-3\"\r\n *ngIf=\"detection?.date_timestamp\">Detection Time :<span\r\n class=\"badge badge-light-primary\">\r\n {{detection.date_timestamp}}</span></span>\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n <span class=\"ms-3\" *ngIf=\"detection?.date_timestamp\">Slot\r\n :<span class=\"badge badge-light-primary\">\r\n {{detection.slot_id}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\">\r\n <img class=\"w-100 h-500px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.path}}\"\r\n alt=\"\">\r\n <div class=\"text-center mt-3\"> {{this.checklistName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-10 my-5\" *ngIf=\"videoChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n\r\n <div class=\"my-3 mt-5\" *ngFor=\"let item of customerunattendedData\">\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{item.storeName}}</p>\r\n </div>\r\n </div>\r\n <ul class=\"row w-100 margin-top-side\">\r\n <li class=\"qa-heading\">\r\n\r\n </li>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\" *ngFor=\"let detection of item.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side\"\r\n *ngIf=\"select!=='suspiciousactivity'\">\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.Answer\">\r\n <p class=\"uni-subtitle\">:<span\r\n class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"detection?.Answer==='rejected'\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.Answer==='approved'\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{detection.date|date:'dd-MM-yyyy' }}\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <h3 class=\"uni-title\">Configured Time</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.configTime\">\r\n <p class=\"uni-subtitle\">: {{detection.configTime }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <h3 class=\"uni-title\">Duration</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.duration\">\r\n <p class=\"uni-subtitle\">: {{detection.duration }} Mins</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <h3 class=\"uni-title\">Downtime</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"detection?.downTime\">\r\n <p class=\"uni-subtitle\">: {{detection.downTime }} Mins <span\r\n ngbTooltip=\"Downtime may result in inaccurate data\"\r\n placement=\"top\" container=\"body\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\"\r\n height=\"16\" viewBox=\"0 0 15 16\" fill=\"none\">\r\n <path\r\n d=\"M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></p>\r\n </div>\r\n </div>\r\n <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n <h3 class=\"card-title\">\r\n <!-- <span class=\"me-3 store-title\">{{item.storeName}}</span> -->\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_id\">Cust ID :\r\n {{detection.customer_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.queue_id\">Queue ID :\r\n {{detection.queue_id}}</span>\r\n <span class=\"ms-2 badge badge-light-default\"\r\n *ngIf=\"detection?.optum_id\">Optom ID :\r\n {{detection.optum_id}}</span>\r\n <!-- <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.date\">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->\r\n <!-- <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.configTime\">Inspection time : {{detection.configTime}}</span> -->\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.temp_id\">TempId :\r\n {{detection.temp_id}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.time_spend\">Timespend :\r\n {{detection.time_spend}}Mins</span>\r\n\r\n </h3>\r\n\r\n <!-- Switch toggle -->\r\n <div class=\"card-toolbar\">\r\n <div class=\"col-md-12 text-end\">\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.entry_time\">Entry time :\r\n {{detection.entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.exit_time\">Exit time :\r\n {{detection.exit_time}}</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"detection?.adherence_rate\">Adherence Rate :\r\n {{detection.adherence_rate}}</span>\r\n <span class=\"ms-3 badge badge-light-primary text-capitalize\"\r\n *ngIf=\"detection?.category\">\r\n {{detection.category}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_entry_time\">Entry time :\r\n {{detection.customer_entry_time}}</span>\r\n <span class=\"ms-3 badge badge-light-default\"\r\n *ngIf=\"detection?.customer_exit_time\">Exit time :\r\n {{detection.customer_exit_time}}</span>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"my-0\" *ngIf=\"select !=='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\"\r\n alt=\"\">\r\n </video>\r\n </div>\r\n <div class=\"my-0\" *ngIf=\"select ==='eyetest'\">\r\n <video controls class=\"w-100 h-450px rounded-top\"\r\n src=\"{{environment.EyeTestCDN}}{{detection.video_path}}\" alt=\"\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n </ul>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"select ==='storeopenandclose'\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"row px-10 mt-5\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">: {{this.checklistName}} </p>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 margin-top-side\" *ngFor=\"let store of storeOpencloseView\">\r\n <div class=\" mx-8 my-8\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"row px-10 mt-5 margin-left-side \">\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <h3 class=\"uni-title\">Buffer for Open Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_open\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_open }}</p>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <h3 class=\"uni-title\">Buffer for Close Time :</h3>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"item?.buffer_close\">\r\n <p class=\"uni-subtitle\">: {{item.buffer_close }}</p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Detection Status</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">:<span class=\"ms-3 badge badge-light-danger\"\r\n *ngIf=\"item?.Flag\">Breached</span>\r\n <span class=\"ms-3 badge badge-light-success\"\r\n *ngIf=\"!item?.Flag\">Not-breached</span>\r\n </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Date</h3>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <p class=\"uni-subtitle\">: {{item.date|date:'dd-MM-yyyy' }}</p>\r\n </div>\r\n </div>\r\n <div class=\"snapcard\">\r\n <div class=\"snapheader ms-6\">\r\n {{item.storeName}}\r\n </div>\r\n <div class=\"row m-0 w-100\">\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.openTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg\"\r\n alt=\"open close snap\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Opening Snap</div>\r\n <div class=\"snaptime\">{{item.openTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"img mt-4 px-3 position-relative\"\r\n *ngIf=\"!item.closeTime\">\r\n <div\r\n class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n <span>\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n \\\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"prvtxt mt-5 textclr\">Preview not\r\n available</span>\r\n <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n is not available at the moment.</span>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"item.closeTime\">\r\n <img class=\"mx-1 img-opc\"\r\n src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg\"\r\n alt=\"Checklist Video Player\">\r\n <div class=\"col-12\">\r\n <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n <div>\r\n <div class=\"snaptext\">Closing Snap</div>\r\n <div class=\"snaptime\">{{item.closeTime}} -\r\n {{item.date}}\r\n </div>\r\n </div>\r\n <span class=\"badge badge-light-primary snapbadge\"\r\n *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n <span class=\"badge badge-light-danger snapbadge\"\r\n *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"boximageChecklist.includes(select)\">\r\n <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n </div>\r\n <div class=\"col-md-12\" *ngFor=\"let store of queueAlertView\">\r\n <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Store Name:</h3>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{store?.storeName}} |\r\n {{store?.city}},{{store?.state}},{{store?.country}} </p>\r\n </div>\r\n <div class=\"col-md-3\">\r\n <h3 class=\"uni-title\">Checklist Name:</h3>\r\n\r\n </div>\r\n <div class=\"col-md-9\">\r\n <p class=\"uni-subtitle\">{{checklistName}}</p>\r\n </div>\r\n <div class=\"col-md-3\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <h3 class=\"uni-title\">Description:</h3>\r\n </div>\r\n <div class=\"col-md-9\"\r\n *ngIf=\"select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'\">\r\n <p class=\"uni-subtitle\">{{checkListDescription}}</p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row m-0 w-100 \">\r\n <div class=\"col-4 mt-2\" *ngFor=\"let item of store.imagesData\">\r\n <div class=\"card bordercolor bg-secondary mt-8\">\r\n <div class=\"text-start ms-5 mt-2 mb-5\">\r\n <div *ngIf=\"item.zone\">\r\n <span\r\n class=\"btn btn-secondary rounded-lg p-2\">{{item.zone}}</span>\r\n </div>\r\n\r\n <div class=\"mt-3 fw-semibold\">{{ item.date_timestamp }}</div>\r\n </div>\r\n <img class=\"w-100 h-250px rounded-bottom\" (click)=\"openModel(item)\"\r\n src=\"{{environment.TraxAIchecklistCDN}}{{item.path}}\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\" [totalItems]=\"totalCount\" [paginationSizes]='paginationSizes'\r\n [pageSize]=\"limit\" (pageChange)=\"onPageChangeview($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </section>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row card mx-0 p-3 \" *ngIf=\"checkAIchecklist()&&!viewnoData&&userDetails?.role!=='user'\">\r\n <div class=\"col-md-12 text-end\">\r\n <button class=\"btn btn-sm border-primary1\" [disabled]=\"!approvalStatus\" (click)=\"appoveChecklist()\">Approve\r\n </button>\r\n </div>\r\n</div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-8\">\r\n <div class=\"modal-header pt-0 ps-1 pe-0\">\r\n <div>\r\n <div class=\"text-start mt-2\">\r\n <div *ngIf=\"viewImage.zone\">\r\n <span class=\"btn btn-secondary rounded-lg p-2\">{{viewImage.zone}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.emptyBoxCount\">\r\n <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"viewImage.entry_time\">\r\n <span>Entry Time : {{viewImage.entry_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.exit_time\">\r\n <span>Exit Time : {{viewImage.exit_time}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.temp_id\">\r\n <span>Temp Id : {{viewImage.temp_id}}</span>\r\n </div>\r\n <div *ngIf=\"viewImage.time_spend\">\r\n <span>Time Spend : {{viewImage.time_spend}} Mins</span>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"viewImage.threshold&&viewImage.Dwelltime\">\r\n <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses\r\n {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>\r\n </div>\r\n <div class=\"mt-3 fw-semibold\">{{ viewImage.date_timestamp }}</div>\r\n </div>\r\n\r\n </div>\r\n <div data-bs-dismiss=\"modal\">\r\n <!-- <span class=\"stream fw-semibold text-nowrap me-5\" *ngIf=\"camera.height && camera.width\"> Resolution: {{camera.height}} X {{camera.width}}</span> -->\r\n <span class=\"btn btn-sm btn-icon btn-active-color-primary me-0\" (click)=\"model.dismiss()\"><svg\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"viewImage.path\" class=\"mt-2 overflow-auto\">\r\n <img class=\"rounded-4 mt-5 img-popup-src w-100\" src=\"{{environment.TraxAIchecklistCDN}}{{viewImage.path}}\">\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n</ng-template>", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:110px;height:110px}.margin-left-side{margin-left:-35px}.margin-top-side{margin-top:-15px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px;width:220Px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:contain!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}.border-primary1{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;font-weight:600;line-height:24px;text-transform:capitalize}.scroll-y{overflow-x:hidden;overflow-y:auto}.totalsize{width:18%}.view-detail{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.left-sidebar{position:sticky;top:0;width:33%;overflow-y:auto}.main-container{display:flex;align-items:flex-start}.right-content{flex-grow:1;width:67%}.bordercolor{border:1px solid var(--Gray-300, #D0D5DD)!important}.toastcard{border-radius:8px;background:var(--Primary-50, #EAF8FF);padding:8px 16px}.toasttext{overflow:hidden;color:var(--Primary-700, #009BF3);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.refreshtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.collage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;height:450px;overflow-y:auto;grid-auto-rows:auto}.collage-tile{width:100%;height:100%}.collage-tile img{width:100%;height:100%!important;border-radius:6px}::ng-deep .my-own-styles .modal-dialog{max-width:600px!important}\n"] }]
|
|
12692
12766
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$2.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i2.NgbModal }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i6.Location }, { type: i2$2.PageInfoService }], propDecorators: { onClick: [{
|
|
12693
12767
|
type: HostListener,
|
|
12694
12768
|
args: ['document:click', ['$event']]
|
|
@@ -20123,7 +20197,7 @@ const routes = [
|
|
|
20123
20197
|
},
|
|
20124
20198
|
{
|
|
20125
20199
|
path: 'audit',
|
|
20126
|
-
loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-
|
|
20200
|
+
loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-BpJbNOps.mjs').then((m) => m.EyeTestAuditModule)
|
|
20127
20201
|
}
|
|
20128
20202
|
// {
|
|
20129
20203
|
// path:'task',
|
|
@@ -20768,4 +20842,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
20768
20842
|
*/
|
|
20769
20843
|
|
|
20770
20844
|
export { TraxService as T, TangoAnalyseTraxModule as a, TangoAnalyseTraxComponent as b };
|
|
20771
|
-
//# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-
|
|
20845
|
+
//# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CeNuiihn.mjs.map
|