tango-app-ui-ticket-user 3.0.11-dev → 3.0.12-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2022/lib/components/edge-cameraview/edge-cameraview.component.mjs +3 -3
  2. package/esm2022/lib/components/edit-details/edit-details.component.mjs +13 -5
  3. package/esm2022/lib/components/infratickets/infratickets.component.mjs +2 -1
  4. package/esm2022/lib/components/installation/installation.component.mjs +11 -4
  5. package/esm2022/lib/components/tickets/tickets.component.mjs +45 -34
  6. package/fesm2022/tango-app-ui-ticket-user.mjs +69 -42
  7. package/fesm2022/tango-app-ui-ticket-user.mjs.map +1 -1
  8. package/lib/components/edit-details/edit-details.component.d.ts +7 -3
  9. package/lib/components/tickets/tickets.component.d.ts +1 -1
  10. package/package.json +1 -1
package/fesm2022/tango-app-ui-ticket-user.mjs CHANGED
@@ -537,6 +537,7 @@ class InfraticketsComponent {
537
537
  this.storeFilter = (data.find(obj => obj.Description === "Store ID"))?.Issues.map((item) => item?.text);
538
538
  this.dateFilter = (data.find(obj => obj.Description === "Date Type"))?.Issues?.text;
539
539
  this.issueFilter = (data.find(obj => obj.Description === "Issue Type"))?.Issues.map((item) => item?.text);
540
+ this.workHistory();
540
541
  }
541
542
  ExportHistoryasXlsx() {
542
543
  let exportData = {
@@ -623,16 +624,17 @@ class EditDetailsComponent {
623
624
  spocDetails;
624
625
  editSpoc;
625
626
  data;
627
+ submit;
626
628
  constructor(activeModel, service, toast, gs) {
627
629
  this.activeModel = activeModel;
628
630
  this.service = service;
629
631
  this.toast = toast;
630
632
  this.gs = gs;
631
633
  this.myForm = new FormGroup({
632
- name: new FormControl(''),
634
+ name: new FormControl('', Validators.required),
633
635
  email: new FormControl('', [
634
636
  Validators.required,
635
- Validators.email
637
+ this.emailValidator
636
638
  ]),
637
639
  contact: new FormControl('', [
638
640
  Validators.required,
@@ -641,6 +643,11 @@ class EditDetailsComponent {
641
643
  ])
642
644
  });
643
645
  }
646
+ emailValidator(control) {
647
+ const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
648
+ const valid = emailRegex.test(control.value);
649
+ return valid ? null : { 'invalidEmail': true };
650
+ }
644
651
  ngOnInit() {
645
652
  if (this.data.edit === true) {
646
653
  this.editSpoc = true;
@@ -659,6 +666,7 @@ class EditDetailsComponent {
659
666
  get contact() { return this.myForm.get('contact'); }
660
667
  onSubmit() {
661
668
  if (this.myForm.valid) {
669
+ this.submit = false;
662
670
  this.spocDetails = this.myForm.value;
663
671
  if (this.data.edit === true)
664
672
  this.updateEditDetails();
@@ -666,6 +674,7 @@ class EditDetailsComponent {
666
674
  this.addSingleSpoc();
667
675
  }
668
676
  else {
677
+ this.submit = true;
669
678
  }
670
679
  }
671
680
  updateEditDetails() {
@@ -708,11 +717,11 @@ class EditDetailsComponent {
708
717
  return (k == 8 || k == 32 || (k >= 48 && k <= 57));
709
718
  }
710
719
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditDetailsComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: TicketsService }, { token: i3.ToastService }, { token: i4.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
711
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EditDetailsComponent, selector: "lib-edit-details", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"card pt-5\">\r\n <div class=\"card-header d-grid border border-0\">\r\n <img class=\"mb-3\" src=\"./assets/tango/Images/userProfile.svg\">\r\n <div class=\"header fw-bold-600\"><span *ngIf=\"!editSpoc\">Add User</span><span *ngIf=\"editSpoc\">Edit Details</span></div>\r\n </div>\r\n <div class=\"card-body\">\r\n <form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <label for=\"Username\" class=\"form-label\">User Name</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Username\" formControlName=\"name\">\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input class=\"form-control\" id=\"Email\" formControlName=\"email\">\r\n <div class=\"mt-3\" *ngIf=\"email?.invalid && (email?.dirty || email?.touched)\">\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.required\">Email is required</div>\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.email\">Invalid email format</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"contact\" class=\"form-label\">Contact number</label>\r\n <div class=\"input-group\">\r\n <input type=\"text\" placeholder=\"+91 (555) 000-0000\" minlength=\"10\" maxlength=\"14\" (keypress)=\"omit_special_char($event)\" class=\"form-control\" id=\"contact\" formControlName=\"contact\">\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"contact?.invalid && (contact?.dirty || contact?.touched)\">\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.minlength\">Please enter a valid contact number (min length: 10 characters)</div>\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.required\">Contact is required</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <button type=\"reset\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"cancelPopup()\">Cancel</button>\r\n <button type=\"submit\" class=\"btn btn-primary w-50 ms-2\"><span *ngIf=\"!editSpoc\">Add</span><span *ngIf=\"editSpoc\">Update</span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".header{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.fw-bold-600{font-weight:600!important}.fw-bold-400{font-weight:400!important}.select-wrapper{min-width:50px!important}.custom-select{width:auto!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}input::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
720
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EditDetailsComponent, selector: "lib-edit-details", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"card pt-5\">\r\n <div class=\"card-header d-grid border border-0\">\r\n <img class=\"mb-3\" src=\"./assets/tango/Images/userProfile.svg\">\r\n <div class=\"header fw-bold-600\"><span *ngIf=\"!editSpoc\">Add User</span><span *ngIf=\"editSpoc\">Edit Details</span></div>\r\n </div>\r\n <div class=\"card-body\">\r\n <form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <label for=\"Username\" class=\"form-label\">User Name</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Username\" formControlName=\"name\">\r\n <div class=\"mt-3\" *ngIf=\"(myForm.get('name')?.invalid && (myForm.get('name')?.touched)) || (submit&&myForm?.invalid &&myForm.get('name')?.invalid )\">\r\n <div class=\"text-danger\" *ngIf=\"myForm.get('name')?.errors?.required\">Name is required</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input class=\"form-control\" id=\"Email\" formControlName=\"email\">\r\n <div class=\"mt-3\" *ngIf=\"(email?.invalid && (email?.dirty || email?.touched)) || (submit&&myForm?.invalid && email?.invalid)\">\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.required && email?.errors?.invalidEmail\">Email is required</div>\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.invalidEmail && !email?.errors?.required\">Invalid email format</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"contact\" class=\"form-label\">Contact number</label>\r\n <div class=\"input-group\">\r\n <input type=\"text\" placeholder=\"+91 (555) 000-0000\" minlength=\"10\" maxlength=\"14\" (keypress)=\"omit_special_char($event)\" class=\"form-control\" id=\"contact\" formControlName=\"contact\">\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"(contact?.invalid && (contact?.dirty || contact?.touched)) || (submit&&myForm?.invalid && contact?.invalid)\">\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.minlength\">Please enter a valid contact number (min length: 10 characters)</div>\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.required\">Contact is required</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <button type=\"reset\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"cancelPopup()\">Cancel</button>\r\n <button type=\"submit\" class=\"btn btn-primary w-50 ms-2\"><span *ngIf=\"!editSpoc\">Add</span><span *ngIf=\"editSpoc\">Update</span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".header{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.fw-bold-600{font-weight:600!important}.fw-bold-400{font-weight:400!important}.select-wrapper{min-width:50px!important}.custom-select{width:auto!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}input::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
712
721
  }
713
722
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EditDetailsComponent, decorators: [{
714
723
  type: Component,
715
- args: [{ selector: 'lib-edit-details', template: "<div class=\"card pt-5\">\r\n <div class=\"card-header d-grid border border-0\">\r\n <img class=\"mb-3\" src=\"./assets/tango/Images/userProfile.svg\">\r\n <div class=\"header fw-bold-600\"><span *ngIf=\"!editSpoc\">Add User</span><span *ngIf=\"editSpoc\">Edit Details</span></div>\r\n </div>\r\n <div class=\"card-body\">\r\n <form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <label for=\"Username\" class=\"form-label\">User Name</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Username\" formControlName=\"name\">\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input class=\"form-control\" id=\"Email\" formControlName=\"email\">\r\n <div class=\"mt-3\" *ngIf=\"email?.invalid && (email?.dirty || email?.touched)\">\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.required\">Email is required</div>\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.email\">Invalid email format</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"contact\" class=\"form-label\">Contact number</label>\r\n <div class=\"input-group\">\r\n <input type=\"text\" placeholder=\"+91 (555) 000-0000\" minlength=\"10\" maxlength=\"14\" (keypress)=\"omit_special_char($event)\" class=\"form-control\" id=\"contact\" formControlName=\"contact\">\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"contact?.invalid && (contact?.dirty || contact?.touched)\">\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.minlength\">Please enter a valid contact number (min length: 10 characters)</div>\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.required\">Contact is required</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <button type=\"reset\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"cancelPopup()\">Cancel</button>\r\n <button type=\"submit\" class=\"btn btn-primary w-50 ms-2\"><span *ngIf=\"!editSpoc\">Add</span><span *ngIf=\"editSpoc\">Update</span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".header{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.fw-bold-600{font-weight:600!important}.fw-bold-400{font-weight:400!important}.select-wrapper{min-width:50px!important}.custom-select{width:auto!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}input::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}\n"] }]
724
+ args: [{ selector: 'lib-edit-details', template: "<div class=\"card pt-5\">\r\n <div class=\"card-header d-grid border border-0\">\r\n <img class=\"mb-3\" src=\"./assets/tango/Images/userProfile.svg\">\r\n <div class=\"header fw-bold-600\"><span *ngIf=\"!editSpoc\">Add User</span><span *ngIf=\"editSpoc\">Edit Details</span></div>\r\n </div>\r\n <div class=\"card-body\">\r\n <form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <label for=\"Username\" class=\"form-label\">User Name</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Username\" formControlName=\"name\">\r\n <div class=\"mt-3\" *ngIf=\"(myForm.get('name')?.invalid && (myForm.get('name')?.touched)) || (submit&&myForm?.invalid &&myForm.get('name')?.invalid )\">\r\n <div class=\"text-danger\" *ngIf=\"myForm.get('name')?.errors?.required\">Name is required</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input class=\"form-control\" id=\"Email\" formControlName=\"email\">\r\n <div class=\"mt-3\" *ngIf=\"(email?.invalid && (email?.dirty || email?.touched)) || (submit&&myForm?.invalid && email?.invalid)\">\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.required && email?.errors?.invalidEmail\">Email is required</div>\r\n <div class=\"text-danger\" *ngIf=\"email?.errors?.invalidEmail && !email?.errors?.required\">Invalid email format</div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <label for=\"contact\" class=\"form-label\">Contact number</label>\r\n <div class=\"input-group\">\r\n <input type=\"text\" placeholder=\"+91 (555) 000-0000\" minlength=\"10\" maxlength=\"14\" (keypress)=\"omit_special_char($event)\" class=\"form-control\" id=\"contact\" formControlName=\"contact\">\r\n </div>\r\n <div class=\"mt-3\" *ngIf=\"(contact?.invalid && (contact?.dirty || contact?.touched)) || (submit&&myForm?.invalid && contact?.invalid)\">\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.minlength\">Please enter a valid contact number (min length: 10 characters)</div>\r\n <div class=\"text-danger\" *ngIf=\"contact?.errors?.required\">Contact is required</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <button type=\"reset\" class=\"btn btn-default btn-outline w-50 me-2\" (click)=\"cancelPopup()\">Cancel</button>\r\n <button type=\"submit\" class=\"btn btn-primary w-50 ms-2\"><span *ngIf=\"!editSpoc\">Add</span><span *ngIf=\"editSpoc\">Update</span></button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>\r\n", styles: [".header{color:var(--Gray-900, #101828)!important;font-size:18px!important;line-height:28px!important}.sub-header{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.fw-bold-600{font-weight:600!important}.fw-bold-400{font-weight:400!important}.select-wrapper{min-width:50px!important}.custom-select{width:auto!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}input::placeholder{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}\n"] }]
716
725
  }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: TicketsService }, { type: i3.ToastService }, { type: i4.GlobalStateService }], propDecorators: { data: [{
717
726
  type: Input
718
727
  }] } });
@@ -979,11 +988,11 @@ class EdgeCameraviewComponent {
979
988
  });
980
989
  }
981
990
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EdgeCameraviewComponent, deps: [{ token: TicketsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
982
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EdgeCameraviewComponent, selector: "lib-edge-cameraview", inputs: { value: "value" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header flex-column border-0\">\r\n <img class=\"mt-5 msgprofile\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n <div class=\"card-title flex-column\">\r\n <span class=\"card-label mb-1\">{{value?.storeName}}- Store Infrastructure</span>\r\n <span class=\"sub-title\">Based on date : {{currentDate | date:'dd-MM-yy'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div>\r\n <span class=\"heading mb-5 fw-semibold\">Edge App Status <span *ngIf=\"viewEdgeAppLogList?.appStatus\">- {{viewEdgeAppLogList?.appStatus ? viewEdgeAppLogList?.appStatus :'--'}}</span></span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Login Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appStartTime ? viewEdgeAppLogList?.appStartTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Close Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appQuitTime ? viewEdgeAppLogList?.appQuitTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Crash Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.AppCrashtime ? viewEdgeAppLogList?.AppCrashtime :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">System Check </span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title \">System Idle</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.screenStatus ?viewEdgeAppLogList?.screenStatus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Anitvirus</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.antiVirus ?viewEdgeAppLogList?.antiVirus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Files Pushed</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.filesPushed ?viewEdgeAppLogList?.filesPushed :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">Camera Check</span>\r\n <div class=\"row\">\r\n <div *ngFor=\"let details of CameraDetails\" class=\"col-sm-6 mt-10\">\r\n <div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-9\">\r\n <div class=\"d-flex align-items-center\">\r\n <div [ngClass]=\"(details?.isActivated && details.isUp) ? 'bg-success':'bg-danger'\" class=\"w-10px h-10px border-0 rounded-3 me-2\"></div><span *ngIf=\"details?.cameraNumber\">{{details?.cameraNumber}}</span>\r\n <span *ngIf=\"details?.cameraName\" class=\"badge badge-light-primary text-primary ms-2\">{{details?.cameraName | titlecase}} Camera</span>\r\n </div>\r\n <div class=\"streamdate fw-semibold\"><span>{{details?.streamName}}</span></div>\r\n </div>\r\n </div>\r\n \r\n <img class=\"w-100 mh-200px rounded-3 mt-3\" src='{{details?.thumbnailImage}}'>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <span *ngIf=\"details?.captureAt\" class=\"streamdate fw-semibold\">Date Added : {{details?.captureAt | customDateFormat}}</span>\r\n <span *ngIf=\"details?.timeElapsed\" class=\"streamdate fw-semibold\">Frame Rate : {{details?.timeElapsed}} Sec</span>\r\n </div>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"loading\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData || !CameraDetails?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".card-label{font-size:18px!important;line-height:28px!important}.sub-title{font-size:14px;font-weight:400;line-height:20px;color:var(--Gray-500, #667085)}.card-view .title{color:var(--Gray-900, #101828)!important;font-size:20px!important;line-height:30px;font-weight:600!important}.card-view .sub-title{color:var(--Gray-900, #101828)!important;font-size:14px!important;line-height:20px;font-weight:500!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.streamdate{color:var(--Gray-400, #98A2B3);font-size:12px;line-height:18px}.heading{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\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: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
991
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: EdgeCameraviewComponent, selector: "lib-edge-cameraview", inputs: { value: "value" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header flex-column border-0\">\r\n <img class=\"mt-5 msgprofile\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n <div class=\"card-title flex-column\">\r\n <span class=\"card-label mb-1\">{{value?.storeName}}- Store Infrastructure</span>\r\n <span class=\"sub-title\">Based on date : {{currentDate | date:'dd-MM-yy'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div>\r\n <span class=\"heading mb-5 fw-semibold\">Edge App Status <span *ngIf=\"viewEdgeAppLogList?.appStatus\">- {{viewEdgeAppLogList?.appStatus ? viewEdgeAppLogList?.appStatus :'--'}}</span></span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Login Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appStartTime ? viewEdgeAppLogList?.appStartTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Close Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appQuitTime ? viewEdgeAppLogList?.appQuitTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Crash Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.AppCrashtime ? viewEdgeAppLogList?.AppCrashtime :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">System Check </span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title \">System Idle</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.screenStatus ?viewEdgeAppLogList?.screenStatus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Antivirus</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.antiVirus ?viewEdgeAppLogList?.antiVirus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Files Pushed</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.filesPushed ?viewEdgeAppLogList?.filesPushed :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">Camera Check</span>\r\n <div class=\"row\">\r\n <div *ngFor=\"let details of CameraDetails\" class=\"col-sm-6 mt-10\">\r\n <div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-9\">\r\n <div class=\"d-flex align-items-center\">\r\n <div [ngClass]=\"(details?.isActivated && details.isUp) ? 'bg-success':'bg-danger'\" class=\"w-10px h-10px border-0 rounded-3 me-2\"></div><span *ngIf=\"details?.cameraNumber\">{{details?.cameraNumber}}</span>\r\n <span *ngIf=\"details?.cameraName\" class=\"badge badge-light-primary text-primary ms-2\">{{details?.cameraName | titlecase}} Camera</span>\r\n </div>\r\n <div class=\"streamdate fw-semibold\"><span>{{details?.streamName}}</span></div>\r\n </div>\r\n </div>\r\n \r\n <img class=\"w-100 mh-200px rounded-3 mt-3\" src='{{details?.thumbnailImage}}'>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <span *ngIf=\"details?.captureAt\" class=\"streamdate fw-semibold\">Date Added : {{details?.captureAt | customDateFormat}}</span>\r\n <span *ngIf=\"details?.timeElapsed\" class=\"streamdate fw-semibold\">Frame Rate : {{details?.timeElapsed}} Sec</span>\r\n </div>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"loading\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData || !CameraDetails?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".card-label{font-size:18px!important;line-height:28px!important}.sub-title{font-size:14px;font-weight:400;line-height:20px;color:var(--Gray-500, #667085)}.card-view .title{color:var(--Gray-900, #101828)!important;font-size:20px!important;line-height:30px;font-weight:600!important}.card-view .sub-title{color:var(--Gray-900, #101828)!important;font-size:14px!important;line-height:20px;font-weight:500!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.streamdate{color:var(--Gray-400, #98A2B3);font-size:12px;line-height:18px}.heading{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\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: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
983
992
  }
984
993
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: EdgeCameraviewComponent, decorators: [{
985
994
  type: Component,
986
- args: [{ selector: 'lib-edge-cameraview', template: "<div class=\"card\">\r\n <div class=\"card-header flex-column border-0\">\r\n <img class=\"mt-5 msgprofile\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n <div class=\"card-title flex-column\">\r\n <span class=\"card-label mb-1\">{{value?.storeName}}- Store Infrastructure</span>\r\n <span class=\"sub-title\">Based on date : {{currentDate | date:'dd-MM-yy'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div>\r\n <span class=\"heading mb-5 fw-semibold\">Edge App Status <span *ngIf=\"viewEdgeAppLogList?.appStatus\">- {{viewEdgeAppLogList?.appStatus ? viewEdgeAppLogList?.appStatus :'--'}}</span></span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Login Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appStartTime ? viewEdgeAppLogList?.appStartTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Close Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appQuitTime ? viewEdgeAppLogList?.appQuitTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Crash Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.AppCrashtime ? viewEdgeAppLogList?.AppCrashtime :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">System Check </span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title \">System Idle</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.screenStatus ?viewEdgeAppLogList?.screenStatus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Anitvirus</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.antiVirus ?viewEdgeAppLogList?.antiVirus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Files Pushed</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.filesPushed ?viewEdgeAppLogList?.filesPushed :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">Camera Check</span>\r\n <div class=\"row\">\r\n <div *ngFor=\"let details of CameraDetails\" class=\"col-sm-6 mt-10\">\r\n <div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-9\">\r\n <div class=\"d-flex align-items-center\">\r\n <div [ngClass]=\"(details?.isActivated && details.isUp) ? 'bg-success':'bg-danger'\" class=\"w-10px h-10px border-0 rounded-3 me-2\"></div><span *ngIf=\"details?.cameraNumber\">{{details?.cameraNumber}}</span>\r\n <span *ngIf=\"details?.cameraName\" class=\"badge badge-light-primary text-primary ms-2\">{{details?.cameraName | titlecase}} Camera</span>\r\n </div>\r\n <div class=\"streamdate fw-semibold\"><span>{{details?.streamName}}</span></div>\r\n </div>\r\n </div>\r\n \r\n <img class=\"w-100 mh-200px rounded-3 mt-3\" src='{{details?.thumbnailImage}}'>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <span *ngIf=\"details?.captureAt\" class=\"streamdate fw-semibold\">Date Added : {{details?.captureAt | customDateFormat}}</span>\r\n <span *ngIf=\"details?.timeElapsed\" class=\"streamdate fw-semibold\">Frame Rate : {{details?.timeElapsed}} Sec</span>\r\n </div>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"loading\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData || !CameraDetails?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".card-label{font-size:18px!important;line-height:28px!important}.sub-title{font-size:14px;font-weight:400;line-height:20px;color:var(--Gray-500, #667085)}.card-view .title{color:var(--Gray-900, #101828)!important;font-size:20px!important;line-height:30px;font-weight:600!important}.card-view .sub-title{color:var(--Gray-900, #101828)!important;font-size:14px!important;line-height:20px;font-weight:500!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.streamdate{color:var(--Gray-400, #98A2B3);font-size:12px;line-height:18px}.heading{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"] }]
995
+ args: [{ selector: 'lib-edge-cameraview', template: "<div class=\"card\">\r\n <div class=\"card-header flex-column border-0\">\r\n <img class=\"mt-5 msgprofile\" src=\"./assets/tango/Images/edgeapp icon.svg\">\r\n <div class=\"card-title flex-column\">\r\n <span class=\"card-label mb-1\">{{value?.storeName}}- Store Infrastructure</span>\r\n <span class=\"sub-title\">Based on date : {{currentDate | date:'dd-MM-yy'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div>\r\n <span class=\"heading mb-5 fw-semibold\">Edge App Status <span *ngIf=\"viewEdgeAppLogList?.appStatus\">- {{viewEdgeAppLogList?.appStatus ? viewEdgeAppLogList?.appStatus :'--'}}</span></span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Login Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appStartTime ? viewEdgeAppLogList?.appStartTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Close Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.appQuitTime ? viewEdgeAppLogList?.appQuitTime :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">App Crash Time</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.AppCrashtime ? viewEdgeAppLogList?.AppCrashtime :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">System Check </span>\r\n <div class=\"border border-gray border-1 rounded-3 w-100 px-10 py-3 mt-3 d-flex justify-content-between\">\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title \">System Idle</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.screenStatus ?viewEdgeAppLogList?.screenStatus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Antivirus</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.antiVirus ?viewEdgeAppLogList?.antiVirus :'--'}}</span>\r\n </div>\r\n <div class=\"card-view d-flex flex-column\">\r\n <span class=\"sub-title\">Files Pushed</span>\r\n <span class=\"title\">{{viewEdgeAppLogList?.filesPushed ?viewEdgeAppLogList?.filesPushed :'--'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-10\">\r\n <span class=\"heading mb-5 fw-semibold\">Camera Check</span>\r\n <div class=\"row\">\r\n <div *ngFor=\"let details of CameraDetails\" class=\"col-sm-6 mt-10\">\r\n <div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-9\">\r\n <div class=\"d-flex align-items-center\">\r\n <div [ngClass]=\"(details?.isActivated && details.isUp) ? 'bg-success':'bg-danger'\" class=\"w-10px h-10px border-0 rounded-3 me-2\"></div><span *ngIf=\"details?.cameraNumber\">{{details?.cameraNumber}}</span>\r\n <span *ngIf=\"details?.cameraName\" class=\"badge badge-light-primary text-primary ms-2\">{{details?.cameraName | titlecase}} Camera</span>\r\n </div>\r\n <div class=\"streamdate fw-semibold\"><span>{{details?.streamName}}</span></div>\r\n </div>\r\n </div>\r\n \r\n <img class=\"w-100 mh-200px rounded-3 mt-3\" src='{{details?.thumbnailImage}}'>\r\n <div class=\"mt-3 d-flex justify-content-between\">\r\n <span *ngIf=\"details?.captureAt\" class=\"streamdate fw-semibold\">Date Added : {{details?.captureAt | customDateFormat}}</span>\r\n <span *ngIf=\"details?.timeElapsed\" class=\"streamdate fw-semibold\">Frame Rate : {{details?.timeElapsed}} Sec</span>\r\n </div>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"loading\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData || !CameraDetails?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".card-label{font-size:18px!important;line-height:28px!important}.sub-title{font-size:14px;font-weight:400;line-height:20px;color:var(--Gray-500, #667085)}.card-view .title{color:var(--Gray-900, #101828)!important;font-size:20px!important;line-height:30px;font-weight:600!important}.card-view .sub-title{color:var(--Gray-900, #101828)!important;font-size:14px!important;line-height:20px;font-weight:500!important}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.streamdate{color:var(--Gray-400, #98A2B3);font-size:12px;line-height:18px}.heading{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"] }]
987
996
  }], ctorParameters: () => [{ type: TicketsService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
988
997
  type: Input
989
998
  }] } });
@@ -2067,7 +2076,7 @@ class TicketsComponent {
2067
2076
  this.gs = gs;
2068
2077
  this.ticketId = this.route.snapshot.paramMap.get('ticketId');
2069
2078
  this.storeId = this.route.snapshot.paramMap.get('storeId');
2070
- this.viewTicket();
2079
+ this.viewTicket(false);
2071
2080
  }
2072
2081
  onClick(event) {
2073
2082
  const target = event.target;
@@ -2093,7 +2102,7 @@ class TicketsComponent {
2093
2102
  this.destroy$.next(true);
2094
2103
  this.destroy$.complete();
2095
2104
  }
2096
- viewTicket() {
2105
+ viewTicket(type) {
2097
2106
  let params = {
2098
2107
  ticketId: this.ticketId
2099
2108
  };
@@ -2101,40 +2110,45 @@ class TicketsComponent {
2101
2110
  next: (res) => {
2102
2111
  if (res && res.code == 200) {
2103
2112
  this.loading = false;
2104
- this.ticketInfo = res?.data;
2105
- this.InfraIssue = this.ticketInfo?.ticketActivity.filter((el) => el?.actionType == 'issueUpdate')[0]?.reasons[0]?.primaryIssue;
2106
- if (this.ticketInfo?.ticketDetails?.issueStatus == 'notidentified' && this.ticketInfo.status !== 'closed' || this.ticketInfo?.ticketDetails.ticketType == 'refreshticket' && this.ticketInfo.status !== 'closed') {
2107
- this.primaryReason();
2108
- this.secondaryReason(this.selectedIssue);
2109
- if (this.ticketInfo?.ticketDetails.ticketType == 'refreshticket') {
2110
- this.viewTicketData = res.data.ticketActivity.slice().reverse();
2111
- if (this.ticketInfo?.cameraList?.length > 0) {
2112
- let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
2113
- if (notworkingCamera.length > 0) {
2114
- this.getCameraList(notworkingCamera);
2113
+ if (type) {
2114
+ this.ticketInfo = res?.data;
2115
+ }
2116
+ else {
2117
+ this.ticketInfo = res?.data;
2118
+ this.InfraIssue = this.ticketInfo?.ticketActivity.filter((el) => el?.actionType == 'issueUpdate')[0]?.reasons[0]?.primaryIssue;
2119
+ if (this.ticketInfo?.ticketDetails?.issueStatus == 'notidentified' && this.ticketInfo.status !== 'closed' || this.ticketInfo?.ticketDetails.ticketType == 'refreshticket' && this.ticketInfo.status !== 'closed') {
2120
+ this.primaryReason();
2121
+ this.secondaryReason(this.selectedIssue);
2122
+ if (this.ticketInfo?.ticketDetails.ticketType == 'refreshticket') {
2123
+ this.viewTicketData = res.data.ticketActivity.slice().reverse();
2124
+ if (this.ticketInfo?.cameraList?.length > 0) {
2125
+ let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
2126
+ if (notworkingCamera.length > 0) {
2127
+ this.getCameraList(notworkingCamera);
2128
+ }
2115
2129
  }
2130
+ this.viewTicketData.forEach((e) => {
2131
+ e.timeStamp = this.getRelativeTime(e.timeStamp);
2132
+ });
2133
+ this.viewTicketData = this.viewTicketData.filter((e) => e.actionType != "statusCheck");
2116
2134
  }
2135
+ }
2136
+ else {
2137
+ this.viewTicketData = res.data.ticketActivity.slice().reverse();
2117
2138
  this.viewTicketData.forEach((e) => {
2118
2139
  e.timeStamp = this.getRelativeTime(e.timeStamp);
2119
2140
  });
2120
2141
  this.viewTicketData = this.viewTicketData.filter((e) => e.actionType != "statusCheck");
2121
- }
2122
- }
2123
- else {
2124
- this.viewTicketData = res.data.ticketActivity.slice().reverse();
2125
- this.viewTicketData.forEach((e) => {
2126
- e.timeStamp = this.getRelativeTime(e.timeStamp);
2127
- });
2128
- this.viewTicketData = this.viewTicketData.filter((e) => e.actionType != "statusCheck");
2129
- if (this.ticketInfo.cameraList.length > 0) {
2130
- let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
2131
- if (notworkingCamera.length > 0) {
2132
- this.getCameraList(notworkingCamera);
2142
+ if (this.ticketInfo?.cameraList.length > 0) {
2143
+ let notworkingCamera = this.ticketInfo.cameraList.filter((e) => e.status != "working");
2144
+ if (notworkingCamera.length > 0) {
2145
+ this.getCameraList(notworkingCamera);
2146
+ }
2133
2147
  }
2134
2148
  }
2135
- }
2136
- if (res?.data?.status == 'open') {
2137
- this.statusUpdate();
2149
+ if (res?.data?.status == 'open') {
2150
+ this.statusUpdate();
2151
+ }
2138
2152
  }
2139
2153
  }
2140
2154
  this.cd.detectChanges();
@@ -2226,7 +2240,7 @@ class TicketsComponent {
2226
2240
  this.ticketId = details.ticketId;
2227
2241
  this.router.navigateByUrl(`tickets/users/ticketinfo/${details.ticketId}/${details.storeId}`);
2228
2242
  // this.activeTicket();
2229
- this.viewTicket();
2243
+ this.viewTicket(false);
2230
2244
  }
2231
2245
  PrevRoute() {
2232
2246
  this.router.navigateByUrl('/tickets/users?type=infra');
@@ -2283,6 +2297,12 @@ class TicketsComponent {
2283
2297
  data = this.secondaryIssues.filter((item) => item.checked).map((item) => item.name);
2284
2298
  }
2285
2299
  }
2300
+ if (this.ticketInfo?.ticketDetails.issueStatus === 'notidentified' && data.length == 0 || this.ticketInfo?.ticketDetails?.refreshTicketStatus === 'notidentified' && data.length == 0) {
2301
+ return this.toastService.getErrorToast("Please Select Issues");
2302
+ }
2303
+ else if (this.ticketInfo?.ticketDetails.issueStatus === 'identified' && this.comments == '' || this.ticketInfo?.ticketDetails?.refreshTicketStatus === 'identified' && this.comments == 0) {
2304
+ return this.toastService.getErrorToast("Please Enter Comments");
2305
+ }
2286
2306
  let ticketDetails = {
2287
2307
  "ticketId": this.ticketId,
2288
2308
  "primary": this.selectedIssue,
@@ -2296,7 +2316,7 @@ class TicketsComponent {
2296
2316
  this.comments = '';
2297
2317
  // this.state.issueStatus = this.selectedIssue;
2298
2318
  this.toastService.getSuccessToast(res.message);
2299
- this.viewTicket();
2319
+ this.viewTicket(false);
2300
2320
  }
2301
2321
  else {
2302
2322
  this.toastService.getErrorToast(res.message);
@@ -2441,7 +2461,7 @@ class TicketsComponent {
2441
2461
  next: (res) => {
2442
2462
  if (res && res.code == 200) {
2443
2463
  this.toastService.getSuccessToast(res.message);
2444
- // this.viewTicket()
2464
+ this.viewTicket(true);
2445
2465
  }
2446
2466
  else {
2447
2467
  this.toastService.getErrorToast(res.message);
@@ -2466,11 +2486,11 @@ class TicketsComponent {
2466
2486
  }
2467
2487
  }
2468
2488
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TicketsComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: TicketsService }, { token: i0.ChangeDetectorRef }, { token: i2.ActivatedRoute }, { token: i3.ToastService }, { token: i4.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
2469
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TicketsComponent, selector: "lib-tickets", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-bold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('ticket')\"><a [ngClass]=\"SelectedTab ==='ticket' ? 'active' :''\"\r\n class=\"nav-link fs-4 cursor-pointer no-border me-6 \">Ticket</a>\r\n </li>\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('storeinfo')\">\r\n <a [ngClass]=\"SelectedTab ==='storeinfo' ? 'active' :''\" class=\"nav-link fs-4 cursor-pointer me-6\">Store\r\n Info</a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab ==='ticket'\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"d-flex\">\r\n <span class=\"card-label mb-2 ms-3 fw-semibold\">{{ticketId}}</span>\r\n <span *ngIf=\"InfraIssue\" class=\"badge badge-light-warning\">{{InfraIssue}}</span>\r\n </div>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Created Date:{{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails.issueStatus ==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.status!=='closed'||ticketInfo?.ticketDetails.ticketType==='refreshticket'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&userType ==='client'\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\" >\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\" *ngIf=\"(gs.userAccess | async)?.manage_tickets_isEdit\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\" *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2 mb-5\">\r\n Please make sure all of your surveillance cameras are functioning and verify the footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold\">{{item?.cameraName ? item?.cameraName:\"--\"}}</span><span class=\"camera fw-bold\"> Camera 1</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\" [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails?.issueStatus ==='identified'||ticketInfo?.status === 'closed'||ticketInfo?.ticketDetails.ticketType === 'refreshticket'\">\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\"\r\n src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"py-3 w-100 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-uppercase\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n \r\n <div *ngFor=\"let res of obj?.reasons\">\r\n \r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are experiencing in\r\n the\r\n store.\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We have\r\n received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll get\r\n back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n \r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"contenttext fw-bold-400\">We have\r\n not\r\n received data from your store. We are currently investigating the issue</div>\r\n <!-- defaultInfra end -->\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" width=\"200px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div> \r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit && (gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\" >\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab === 'storeinfo'\">\r\n <lib-store-info [storeId]=\"ticketInfo?.basicDetails?.storeId\"></lib-store-info>\r\n</div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}.symbol .symbol-label{width:48px!important;height:48px!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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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: StoreInfoComponent, selector: "lib-store-info", inputs: ["storeId"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
2489
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TicketsComponent, selector: "lib-tickets", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-bold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('ticket')\"><a [ngClass]=\"SelectedTab ==='ticket' ? 'active' :''\"\r\n class=\"nav-link fs-4 cursor-pointer no-border me-6 \">Ticket</a>\r\n </li>\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('storeinfo')\">\r\n <a [ngClass]=\"SelectedTab ==='storeinfo' ? 'active' :''\" class=\"nav-link fs-4 cursor-pointer me-6\">Store\r\n Info</a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab ==='ticket'\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"d-flex\">\r\n <span class=\"card-label mb-2 ms-3 fw-semibold\">{{ticketId}}</span>\r\n <span *ngIf=\"InfraIssue\" class=\"badge badge-light-warning\">{{InfraIssue}}</span>\r\n </div>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Created Date:{{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails.issueStatus ==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.status!=='closed'||ticketInfo?.ticketDetails.ticketType==='refreshticket'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&userType ==='client'\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\" >\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\" *ngIf=\"(gs.userAccess | async)?.manage_tickets_isEdit\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\" *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2 mb-5\">\r\n Please make sure all of your surveillance cameras are functioning and verify the footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold\">{{item?.cameraName ? item?.cameraName:\"--\"}}</span><span class=\"camera fw-bold\"> Camera 1</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\" [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails?.issueStatus ==='identified'||ticketInfo?.status === 'closed'||ticketInfo?.ticketDetails.ticketType === 'refreshticket'\">\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\"\r\n src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"py-3 w-100 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-uppercase\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n \r\n <div *ngFor=\"let res of obj?.reasons\">\r\n \r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are experiencing in\r\n the\r\n store.\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We have\r\n received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll get\r\n back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n \r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"contenttext fw-bold-400\">We have\r\n not\r\n received data from your store. We are currently investigating the issue</div>\r\n <!-- defaultInfra end -->\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" width=\"200px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div> \r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit && (gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\" >\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab === 'storeinfo'\">\r\n <lib-store-info [storeId]=\"ticketInfo?.basicDetails?.storeId\"></lib-store-info>\r\n</div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}.symbol .symbol-label{width:48px!important;height:48px!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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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: StoreInfoComponent, selector: "lib-store-info", inputs: ["storeId"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
2470
2490
  }
2471
2491
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TicketsComponent, decorators: [{
2472
2492
  type: Component,
2473
- args: [{ selector: 'lib-tickets', template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-bold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('ticket')\"><a [ngClass]=\"SelectedTab ==='ticket' ? 'active' :''\"\r\n class=\"nav-link fs-4 cursor-pointer no-border me-6 \">Ticket</a>\r\n </li>\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('storeinfo')\">\r\n <a [ngClass]=\"SelectedTab ==='storeinfo' ? 'active' :''\" class=\"nav-link fs-4 cursor-pointer me-6\">Store\r\n Info</a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab ==='ticket'\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"d-flex\">\r\n <span class=\"card-label mb-2 ms-3 fw-semibold\">{{ticketId}}</span>\r\n <span *ngIf=\"InfraIssue\" class=\"badge badge-light-warning\">{{InfraIssue}}</span>\r\n </div>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Created Date:{{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails.issueStatus ==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.status!=='closed'||ticketInfo?.ticketDetails.ticketType==='refreshticket'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&userType ==='client'\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\" >\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\" *ngIf=\"(gs.userAccess | async)?.manage_tickets_isEdit\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\" *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2 mb-5\">\r\n Please make sure all of your surveillance cameras are functioning and verify the footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold\">{{item?.cameraName ? item?.cameraName:\"--\"}}</span><span class=\"camera fw-bold\"> Camera 1</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\" [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails?.issueStatus ==='identified'||ticketInfo?.status === 'closed'||ticketInfo?.ticketDetails.ticketType === 'refreshticket'\">\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\"\r\n src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"py-3 w-100 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-uppercase\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n \r\n <div *ngFor=\"let res of obj?.reasons\">\r\n \r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are experiencing in\r\n the\r\n store.\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We have\r\n received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll get\r\n back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n \r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"contenttext fw-bold-400\">We have\r\n not\r\n received data from your store. We are currently investigating the issue</div>\r\n <!-- defaultInfra end -->\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" width=\"200px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div> \r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit && (gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\" >\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab === 'storeinfo'\">\r\n <lib-store-info [storeId]=\"ticketInfo?.basicDetails?.storeId\"></lib-store-info>\r\n</div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}.symbol .symbol-label{width:48px!important;height:48px!important}\n"] }]
2493
+ args: [{ selector: 'lib-tickets', template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-bold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card mb-5 py-3 px-5\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('ticket')\"><a [ngClass]=\"SelectedTab ==='ticket' ? 'active' :''\"\r\n class=\"nav-link fs-4 cursor-pointer no-border me-6 \">Ticket</a>\r\n </li>\r\n <li class=\"nav-item\" (click)=\"SelectedTabs('storeinfo')\">\r\n <a [ngClass]=\"SelectedTab ==='storeinfo' ? 'active' :''\" class=\"nav-link fs-4 cursor-pointer me-6\">Store\r\n Info</a>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab ==='ticket'\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"d-flex\">\r\n <span class=\"card-label mb-2 ms-3 fw-semibold\">{{ticketId}}</span>\r\n <span *ngIf=\"InfraIssue\" class=\"badge badge-light-warning\">{{InfraIssue}}</span>\r\n </div>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Created Date:{{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails.issueStatus ==='notidentified'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.status!=='closed'||ticketInfo?.ticketDetails.ticketType==='refreshticket'&&(gs.userAccess | async)?.manage_tickets_isEdit&&ticketInfo?.ticketDetails?.refreshTicketStatus==='notidentified'&&userType ==='client'\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\" >\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'&&showcamIssue||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\" *ngIf=\"(gs.userAccess | async)?.manage_tickets_isEdit\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4\" *ngIf=\"selectedIssue === 'Camera Issues'&&!showcamIssue&&cameraListImages.length>0\">\r\n <div class=\"maincard-label fw-semibold py-2 mb-5\">\r\n Please make sure all of your surveillance cameras are functioning and verify the footage you have. </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\" *ngFor=\"let item of cameraListImages;let i = index\">\r\n <span class=\"camera fw-bold\">{{item?.cameraName ? item?.cameraName:\"--\"}}</span><span class=\"camera fw-bold\"> Camera 1</span>\r\n <div\r\n class=\"d-flex align-items-centre justify-content-centre rounded-3 overflow-hidden mt-3\">\r\n <img class=\"w-100\" [src]=\"item?.thumbnailImage?item?.thumbnailImage:'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'\">\r\n <!-- <img class=\"w-100\" src='https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvcmV8ZW58MHx8MHx8fDA%3D'> -->\r\n\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n <button (click)=\"cameraSelection(i,'working')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 me-2\"\r\n [ngClass]=\"item.cameraNumber==='working'?'text-primary bg-light-primary':''\">\r\n Working\r\n </button>\r\n <button (click)=\"cameraSelection(i,'notworking')\" type=\"button\"\r\n class=\"btn btn-default btn-outline w-50 ms-2\"\r\n [ngClass]=\"item.cameraNumber==='notworking'?'text-danger bg-light-danger':''\">\r\n Not Working\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showcamIssue\" class=\"btn btn-primary w-100 mt-6\"\r\n (click)=\"updateCamStatus()\">Proceed</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"ticketInfo?.ticketDetails?.issueStatus ==='identified'||ticketInfo?.status === 'closed'||ticketInfo?.ticketDetails.ticketType === 'refreshticket'\">\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <img class=\"msgprofile\"\r\n src=\"./assets/tango/Images/userProfile.svg\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray\" style=\"width:0px\"></div>\r\n </div>\r\n\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"py-3 w-100 pt-0\">\r\n <div *ngIf=\"obj.actionType !=='statusChange'\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-uppercase\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n \r\n <div *ngFor=\"let res of obj?.reasons\">\r\n \r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">{{obj?.comment}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"selectedIssue === ''\" class=\"profile-label fw-semibold mt-2\">\r\n Kindly choose the option below that corresponds to the issue you are experiencing in\r\n the\r\n store.\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold text-capitalize\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"timingtext fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div class=\"mb-3\">\r\n <span class=\"profile-label fw-bold-400\">tango has replied to the\r\n issue</span>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'dataRecived'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for your assistance. We have\r\n received the data from your Store.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckMonitor'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Thank you for the update. We\u2019ll get\r\n back after the buffer time you provided.\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n \r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\"> \r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n </div>\r\n <!-- defaultInfra start -->\r\n <div *ngIf=\"obj.actionType ==='defaultInfra'\" class=\"contenttext fw-bold-400\">We have\r\n not\r\n received data from your store. We are currently investigating the issue</div>\r\n <!-- defaultInfra end -->\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" width=\"200px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div> \r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit && (gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\" >\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"SelectedTab === 'storeinfo'\">\r\n <lib-store-info [storeId]=\"ticketInfo?.basicDetails?.storeId\"></lib-store-info>\r\n</div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}.symbol .symbol-label{width:48px!important;height:48px!important}\n"] }]
2474
2494
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: TicketsService }, { type: i0.ChangeDetectorRef }, { type: i2.ActivatedRoute }, { type: i3.ToastService }, { type: i4.GlobalStateService }], propDecorators: { fileInput: [{
2475
2495
  type: ViewChild,
2476
2496
  args: ['fileInput']
@@ -2603,7 +2623,6 @@ class InstallationComponent {
2603
2623
  e.timeStamp = this.getRelativeTime(e.timeStamp);
2604
2624
  });
2605
2625
  res.data.ticketActivity.forEach((element) => {
2606
- console.log(res.data?.ticketDetails?.issueStatus);
2607
2626
  if (element.actionType == 'prerequestcheckfailed' && res.data?.ticketDetails?.issueStatus != 'identified') {
2608
2627
  this.prerequestFailed = true;
2609
2628
  }
@@ -2745,6 +2764,12 @@ class InstallationComponent {
2745
2764
  data = this.secondaryIssues.filter((item) => item.checked).map((item) => item.name);
2746
2765
  }
2747
2766
  }
2767
+ if (this.ticketInfo?.ticketDetails.issueStatus === 'notidentified' && data.length == 0 || this.ticketInfo?.ticketDetails?.refreshTicketStatus === 'notidentified' && data.length == 0) {
2768
+ return this.toastService.getErrorToast("Please Select Issues");
2769
+ }
2770
+ else if (this.ticketInfo?.ticketDetails.issueStatus === 'identified' && this.comments == '' || this.ticketInfo?.ticketDetails?.refreshTicketStatus === 'identified' && this.comments == 0) {
2771
+ return this.toastService.getErrorToast("Please Enter Comments");
2772
+ }
2748
2773
  let ticketDetails = {
2749
2774
  "ticketId": this.ticketId,
2750
2775
  "primary": this.selectedIssue,
@@ -2756,6 +2781,8 @@ class InstallationComponent {
2756
2781
  if (res && res.code == 200) {
2757
2782
  this.toastService.getSuccessToast(res.message);
2758
2783
  this.viewTicket();
2784
+ this.comments = '';
2785
+ this.selectedIssue = [];
2759
2786
  }
2760
2787
  else {
2761
2788
  this.toastService.getErrorToast(res.message);
@@ -2918,11 +2945,11 @@ class InstallationComponent {
2918
2945
  });
2919
2946
  }
2920
2947
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InstallationComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: TicketsService }, { token: i0.ChangeDetectorRef }, { token: i2.ActivatedRoute }, { token: i3.ToastService }, { token: i4.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
2921
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: InstallationComponent, selector: "lib-installation", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-semibold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2 fw-semibold\">{{ticketId}}</span>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n\r\n <button *ngIf=\"installationStart&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"startInstallation()\">\r\n Start Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"configuring&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"Configuring()\">\r\n Configuring <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7148_17608)\">\r\n <path\r\n d=\"M10.0003 1.66675V5.00008M10.0003 15.0001V18.3334M4.10866 4.10841L6.46699 6.46675M13.5337 13.5334L15.892 15.8917M1.66699 10.0001H5.00033M15.0003 10.0001H18.3337M4.10866 15.8917L6.46699 13.5334M13.5337 6.46675L15.892 4.10841\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7148_17608\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"installationResume&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-15 me-2 btn-primary\"\r\n (click)=\"resumeInstallation()\">\r\n Resume Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div *ngIf=\"prerequestFailed&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"instal-failed mb-5 d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-start\">\r\n <img src=\"./assets/tango/Images/_File upload icon.svg\">\r\n <div class=\"ms-5\">\r\n <div class=\"main-text\">Intallation Failed </div>\r\n <div class=\"sub-text\">Please enter the reason behind the installation failed</div>\r\n </div>\r\n </div>\r\n <button (click)=\"updateIssue()\" type=\"button\" class=\"btn btn-default btn-danger\">\r\n Update Issue\r\n </button>\r\n </div>\r\n <div *ngIf=\"showform\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div>\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n \r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <!-- {{obj.actionType}} -->\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div>\r\n <!-- <span class=\"profile-label fw-bold-400\">tango has replied to the issue</span> -->\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckstart'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Started the</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckfailed'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Process failed on</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType === 'fetchcamera'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check -> Fetchcamera</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'configure'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\"> Fetchcamera -> Configuring</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\" >{{ errorMessage }}</div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\">\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.symbol .symbol-label{width:48px!important;height:48px!important}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Black, #101828);font-size:16px;line-height:24px}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.instal-failed{border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA);padding:16px}.instal-failed .main-text{color:var(--Error-700, #B42318);font-size:14px;font-weight:500;line-height:20px}.instal-failed .sub-text{color:var(--Error-600, #D92D20);font-size:14px;font-weight:400;line-height:20px}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}\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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
2948
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: InstallationComponent, selector: "lib-installation", host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-semibold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2 fw-semibold\">{{ticketId}}</span>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n\r\n <button *ngIf=\"installationStart&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"startInstallation()\">\r\n Start Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"configuring&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"Configuring()\">\r\n Configuring <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7148_17608)\">\r\n <path\r\n d=\"M10.0003 1.66675V5.00008M10.0003 15.0001V18.3334M4.10866 4.10841L6.46699 6.46675M13.5337 13.5334L15.892 15.8917M1.66699 10.0001H5.00033M15.0003 10.0001H18.3337M4.10866 15.8917L6.46699 13.5334M13.5337 6.46675L15.892 4.10841\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7148_17608\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"installationResume&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-15 me-2 btn-primary\"\r\n (click)=\"resumeInstallation()\">\r\n Resume Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div *ngIf=\"prerequestFailed&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"instal-failed mb-5 d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-start\">\r\n <img src=\"./assets/tango/Images/_File upload icon.svg\">\r\n <div class=\"ms-5\">\r\n <div class=\"main-text\">Intallation Failed </div>\r\n <div class=\"sub-text\">Please enter the reason behind the installation failed</div>\r\n </div>\r\n </div>\r\n <button (click)=\"updateIssue()\" type=\"button\" class=\"btn btn-default btn-danger\">\r\n Update Issue\r\n </button>\r\n </div>\r\n <div *ngIf=\"showform\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div>\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n \r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <!-- {{obj.actionType}} -->\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div>\r\n <!-- <span class=\"profile-label fw-bold-400\">tango has replied to the issue</span> -->\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckstart'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Started the</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckfailed'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Process failed on</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType === 'fetchcamera'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check -> Fetchcamera</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'configure'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\"> Fetchcamera -> Configuring</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\" >{{ errorMessage }}</div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\">\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.symbol .symbol-label{width:48px!important;height:48px!important}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Black, #101828);font-size:16px;line-height:24px}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.instal-failed{border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA);padding:16px}.instal-failed .main-text{color:var(--Error-700, #B42318);font-size:14px;font-weight:500;line-height:20px}.instal-failed .sub-text{color:var(--Error-600, #D92D20);font-size:14px;font-weight:400;line-height:20px}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}\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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.CustomDateFormatPipe, name: "customDateFormat" }] });
2922
2949
  }
2923
2950
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InstallationComponent, decorators: [{
2924
2951
  type: Component,
2925
- args: [{ selector: 'lib-installation', template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-semibold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2 fw-semibold\">{{ticketId}}</span>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n\r\n <button *ngIf=\"installationStart&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"startInstallation()\">\r\n Start Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"configuring&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"Configuring()\">\r\n Configuring <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7148_17608)\">\r\n <path\r\n d=\"M10.0003 1.66675V5.00008M10.0003 15.0001V18.3334M4.10866 4.10841L6.46699 6.46675M13.5337 13.5334L15.892 15.8917M1.66699 10.0001H5.00033M15.0003 10.0001H18.3337M4.10866 15.8917L6.46699 13.5334M13.5337 6.46675L15.892 4.10841\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7148_17608\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"installationResume&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-15 me-2 btn-primary\"\r\n (click)=\"resumeInstallation()\">\r\n Resume Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div *ngIf=\"prerequestFailed&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"instal-failed mb-5 d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-start\">\r\n <img src=\"./assets/tango/Images/_File upload icon.svg\">\r\n <div class=\"ms-5\">\r\n <div class=\"main-text\">Intallation Failed </div>\r\n <div class=\"sub-text\">Please enter the reason behind the installation failed</div>\r\n </div>\r\n </div>\r\n <button (click)=\"updateIssue()\" type=\"button\" class=\"btn btn-default btn-danger\">\r\n Update Issue\r\n </button>\r\n </div>\r\n <div *ngIf=\"showform\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div>\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n \r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <!-- {{obj.actionType}} -->\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div>\r\n <!-- <span class=\"profile-label fw-bold-400\">tango has replied to the issue</span> -->\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckstart'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Started the</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckfailed'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Process failed on</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType === 'fetchcamera'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check -> Fetchcamera</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'configure'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\"> Fetchcamera -> Configuring</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\" >{{ errorMessage }}</div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\">\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.symbol .symbol-label{width:48px!important;height:48px!important}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Black, #101828);font-size:16px;line-height:24px}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.instal-failed{border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA);padding:16px}.instal-failed .main-text{color:var(--Error-700, #B42318);font-size:14px;font-weight:500;line-height:20px}.instal-failed .sub-text{color:var(--Error-600, #D92D20);font-size:14px;font-weight:400;line-height:20px}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}\n"] }]
2952
+ args: [{ selector: 'lib-installation', template: "<div class=\"mb-5 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"maincard-content bg-white px-3 py-2 me-3 cursor-pointer\" style=\"width: fit-content;\" (click)=\"PrevRoute()\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M12.8327 6.99935H1.16602M1.16602 6.99935L6.99935 12.8327M1.16602 6.99935L6.99935 1.16602\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></div>\r\n <span class=\"fw-semibold store-label\"> {{storeId}}</span> <span *ngIf=\"storeAddress?.address\"\r\n class=\"fw-bold store-label\"> |\r\n {{storeAddress?.address}} </span>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"badge badge-light-primary\"> {{activeTicketDetails?.count}} {{storeAddress?.status}}</span>\r\n <div class=\"position-relative ps-3\">\r\n <button type=\"button\" (click)=\"storeChange($event)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between bg-white\">\r\n {{storeId ? storeId : storeAddress?.storeId}}\r\n <span class=\"ms-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" 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.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"storeDropDown\" class=\"card py-1 z-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let details of activeTicketDetails?.data\" class=\"list-unstyled\">\r\n <li [ngClass]=\"storeAddress?.storeId === details?.storeId ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"getstoreAddress(details)\">\r\n {{details?.storeId}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2 fw-semibold\">{{ticketId}}</span>\r\n <span class=\"text-sub fw-bold mb-2 badge badge-light-default\"><svg class=\"me-3\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3877_96552)\">\r\n <path\r\n d=\"M8 1V3M4 1V3M1.5 5H10.5M2.5 2H9.5C10.0523 2 10.5 2.44772 10.5 3V10C10.5 10.5523 10.0523 11 9.5 11H2.5C1.94772 11 1.5 10.5523 1.5 10V3C1.5 2.44772 1.94772 2 2.5 2Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_96552\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> {{ ticketInfo?.createdAt|customDateFormat}}</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n\r\n <button *ngIf=\"installationStart&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"startInstallation()\">\r\n Start Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"configuring&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-20 me-2 btn-primary\"\r\n (click)=\"Configuring()\">\r\n Configuring <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_7148_17608)\">\r\n <path\r\n d=\"M10.0003 1.66675V5.00008M10.0003 15.0001V18.3334M4.10866 4.10841L6.46699 6.46675M13.5337 13.5334L15.892 15.8917M1.66699 10.0001H5.00033M15.0003 10.0001H18.3337M4.10866 15.8917L6.46699 13.5334M13.5337 6.46675L15.892 4.10841\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_7148_17608\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"installationResume&&(gs.userAccess | async)?.manage_tickets_isEdit\" type=\"button\" class=\"btn btn-default px-15 me-2 btn-primary\"\r\n (click)=\"resumeInstallation()\">\r\n Resume Installation <svg class=\"ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openContact()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><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_3877_102203)\">\r\n <path\r\n d=\"M12.5415 4.16659C13.3555 4.32539 14.1035 4.72347 14.6899 5.30986C15.2763 5.89626 15.6744 6.64431 15.8332 7.45825M12.5415 0.833252C14.2326 1.02112 15.8095 1.7784 17.0134 2.98076C18.2173 4.18312 18.9765 5.75909 19.1665 7.44992M18.3332 14.0999V16.5999C18.3341 16.832 18.2866 17.0617 18.1936 17.2744C18.1006 17.487 17.9643 17.6779 17.7933 17.8348C17.6222 17.9917 17.4203 18.1112 17.2005 18.1855C16.9806 18.2599 16.7477 18.2875 16.5165 18.2666C13.9522 17.988 11.489 17.1117 9.32486 15.7083C7.31139 14.4288 5.60431 12.7217 4.32486 10.7083C2.91651 8.53426 2.04007 6.05908 1.76653 3.48325C1.7457 3.25281 1.77309 3.02055 1.84695 2.80127C1.9208 2.58199 2.03951 2.38049 2.1955 2.2096C2.3515 2.03871 2.54137 1.90218 2.75302 1.80869C2.96468 1.7152 3.19348 1.6668 3.42486 1.66659H5.92486C6.32928 1.6626 6.72136 1.80582 7.028 2.06953C7.33464 2.33324 7.53493 2.69946 7.59153 3.09992C7.69705 3.89997 7.89274 4.68552 8.17486 5.44159C8.28698 5.73986 8.31125 6.06401 8.24478 6.37565C8.17832 6.68729 8.02392 6.97334 7.79986 7.19992L6.74153 8.25825C7.92783 10.3445 9.65524 12.072 11.7415 13.2583L12.7999 12.1999C13.0264 11.9759 13.3125 11.8215 13.6241 11.755C13.9358 11.6885 14.2599 11.7128 14.5582 11.8249C15.3143 12.107 16.0998 12.3027 16.8999 12.4083C17.3047 12.4654 17.6744 12.6693 17.9386 12.9812C18.2029 13.2931 18.3433 13.6912 18.3332 14.0999Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3877_102203\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"ms-2\">Contact Details</span> </button>\r\n <button *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" type=\"button\" (click)=\"openRemote()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><span>\r\n <img src=\"./assets/tango/Images/desktop.svg\">\r\n Connect Remotely</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-8\">\r\n <div *ngIf=\"prerequestFailed&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"instal-failed mb-5 d-flex justify-content-between\">\r\n <div class=\"d-flex align-items-start\">\r\n <img src=\"./assets/tango/Images/_File upload icon.svg\">\r\n <div class=\"ms-5\">\r\n <div class=\"main-text\">Intallation Failed </div>\r\n <div class=\"sub-text\">Please enter the reason behind the installation failed</div>\r\n </div>\r\n </div>\r\n <button (click)=\"updateIssue()\" type=\"button\" class=\"btn btn-default btn-danger\">\r\n Update Issue\r\n </button>\r\n </div>\r\n <div *ngIf=\"showform\">\r\n <div class=\"openedissue d-flex justify-content-between align-items-center\">\r\n <span class=\"profile-label fw-semibold\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M12.9 3.04504C12.9 3.04504 15.6 6.60004 15.6 12L12.9 3.04504ZM11.1 20.955C11.1 20.955 8.4 17.4 8.4 12C8.4 6.60004 11.1 3.04504 11.1 3.04504M3.567 15.15H12H3.567ZM3.567 8.85004H20.433H3.567Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.8911 17.3252C21.3357 17.5988 21.3078 18.2639 20.8506 18.3161L18.5403 18.578L17.5044 20.6588C17.2992 21.0719 16.6647 20.8694 16.5594 20.3582L15.4299 14.8538C15.3408 14.4218 15.7296 14.15 16.1049 14.3813L20.8911 17.3252Z\"\r\n fill=\"white\" />\r\n <path\r\n d=\"M20.25 12C20.25 12.4142 20.5858 12.75 21 12.75C21.4142 12.75 21.75 12.4142 21.75 12H20.25ZM12 21.75C12.4142 21.75 12.75 21.4142 12.75 21C12.75 20.5858 12.4142 20.25 12 20.25V21.75ZM13.4973 2.59142C13.2467 2.26156 12.7762 2.19725 12.4464 2.44778C12.1165 2.6983 12.0522 3.1688 12.3027 3.49866L13.4973 2.59142ZM14.85 12C14.85 12.4143 15.1858 12.75 15.6 12.75C16.0142 12.75 16.35 12.4143 16.35 12H14.85ZM10.5027 21.4087C10.7533 21.7385 11.2238 21.8028 11.5536 21.5523C11.8835 21.3018 11.9478 20.8313 11.6973 20.5014L10.5027 21.4087ZM11.6973 3.49866C11.9478 3.1688 11.8835 2.6983 11.5536 2.44778C11.2238 2.19725 10.7533 2.26156 10.5027 2.59142L11.6973 3.49866ZM3.567 14.4C3.15279 14.4 2.817 14.7358 2.817 15.15C2.817 15.5643 3.15279 15.9 3.567 15.9V14.4ZM12 15.9C12.4142 15.9 12.75 15.5643 12.75 15.15C12.75 14.7358 12.4142 14.4 12 14.4V15.9ZM3.567 8.10004C3.15279 8.10004 2.817 8.43583 2.817 8.85004C2.817 9.26426 3.15279 9.60004 3.567 9.60004V8.10004ZM20.433 9.60004C20.8472 9.60004 21.183 9.26426 21.183 8.85004C21.183 8.43583 20.8472 8.10004 20.433 8.10004V9.60004ZM20.8911 17.3252L21.2842 16.6865L21.284 16.6864L20.8911 17.3252ZM20.8506 18.3161L20.9351 19.0613L20.9357 19.0613L20.8506 18.3161ZM18.5403 18.578L18.4558 17.8328L18.0506 17.8787L17.8689 18.2438L18.5403 18.578ZM17.5044 20.6588L16.833 20.3246L16.8327 20.3252L17.5044 20.6588ZM16.5594 20.3582L15.8247 20.509L15.8248 20.5095L16.5594 20.3582ZM15.4299 14.8538L16.1646 14.703L16.1644 14.7023L15.4299 14.8538ZM16.1049 14.3813L15.7114 15.0198L15.712 15.0201L16.1049 14.3813ZM21.75 12C21.75 6.61509 17.3849 2.25 12 2.25V3.75C16.5565 3.75 20.25 7.44351 20.25 12H21.75ZM12 2.25C6.61509 2.25 2.25 6.61509 2.25 12H3.75C3.75 7.44351 7.44351 3.75 12 3.75V2.25ZM2.25 12C2.25 17.3849 6.61509 21.75 12 21.75V20.25C7.44351 20.25 3.75 16.5565 3.75 12H2.25ZM12.9 3.04504C12.3027 3.49866 12.3026 3.49846 12.3024 3.49828C12.3024 3.49823 12.3023 3.49806 12.3022 3.49797C12.3021 3.49779 12.302 3.49767 12.3019 3.4976C12.3018 3.49746 12.3019 3.49753 12.3021 3.49781C12.3025 3.49838 12.3036 3.4998 12.3053 3.50206C12.3086 3.50658 12.3144 3.51447 12.3225 3.52567C12.3387 3.54809 12.3641 3.58375 12.3973 3.63226C12.4638 3.72929 12.5616 3.87752 12.6805 4.07361C12.9183 4.46606 13.2393 5.04863 13.5614 5.79478C14.2061 7.28837 14.85 9.42526 14.85 12H16.35C16.35 9.17483 15.6439 6.83422 14.9386 5.20031C14.5857 4.38271 14.2317 3.73902 13.9633 3.29616C13.829 3.0746 13.7159 2.90291 13.6347 2.78443C13.5941 2.72518 13.5615 2.6792 13.5381 2.6469C13.5265 2.63075 13.5171 2.61802 13.5102 2.60876C13.5068 2.60413 13.504 2.60036 13.5018 2.59747C13.5007 2.59602 13.4998 2.5948 13.4991 2.59379C13.4987 2.59329 13.4983 2.59284 13.498 2.59244C13.4979 2.59224 13.4977 2.59199 13.4976 2.59189C13.4974 2.59165 13.4973 2.59142 12.9 3.04504ZM11.1 20.955C11.6973 20.5014 11.6974 20.5016 11.6976 20.5018C11.6976 20.5019 11.6977 20.502 11.6978 20.5021C11.6979 20.5023 11.698 20.5024 11.6981 20.5025C11.6982 20.5026 11.6981 20.5026 11.6979 20.5023C11.6975 20.5017 11.6964 20.5003 11.6948 20.498C11.6914 20.4935 11.6856 20.4856 11.6775 20.4744C11.6613 20.452 11.6359 20.4163 11.6027 20.3678C11.5362 20.2708 11.4384 20.1226 11.3195 19.9265C11.0817 19.534 10.7607 18.9515 10.4386 18.2053C9.79388 16.7117 9.15 14.5748 9.15 12H7.65C7.65 14.8253 8.35613 17.1659 9.06142 18.7998C9.41434 19.6174 9.76833 20.2611 10.0367 20.7039C10.171 20.9255 10.2841 21.0972 10.3653 21.2157C10.4059 21.2749 10.4385 21.3209 10.4619 21.3532C10.4735 21.3693 10.4829 21.3821 10.4898 21.3913C10.4932 21.396 10.496 21.3997 10.4982 21.4026C10.4993 21.4041 10.5002 21.4053 10.5009 21.4063C10.5013 21.4068 10.5017 21.4073 10.502 21.4076C10.5021 21.4078 10.5023 21.4081 10.5024 21.4082C10.5026 21.4084 10.5027 21.4087 11.1 20.955ZM9.15 12C9.15 9.42526 9.79388 7.28837 10.4386 5.79478C10.7607 5.04863 11.0817 4.46606 11.3195 4.07361C11.4384 3.87752 11.5362 3.72929 11.6027 3.63226C11.6359 3.58375 11.6613 3.54809 11.6775 3.52567C11.6856 3.51447 11.6914 3.50658 11.6948 3.50206C11.6964 3.4998 11.6975 3.49838 11.6979 3.49781C11.6981 3.49753 11.6982 3.49746 11.6981 3.4976C11.698 3.49767 11.6979 3.49779 11.6978 3.49797C11.6977 3.49806 11.6976 3.49823 11.6976 3.49828C11.6974 3.49846 11.6973 3.49866 11.1 3.04504C10.5027 2.59142 10.5026 2.59165 10.5024 2.59189C10.5023 2.59199 10.5021 2.59224 10.502 2.59244C10.5017 2.59284 10.5013 2.59329 10.5009 2.59379C10.5002 2.5948 10.4993 2.59602 10.4982 2.59747C10.496 2.60036 10.4932 2.60413 10.4898 2.60876C10.4829 2.61802 10.4735 2.63075 10.4619 2.6469C10.4385 2.6792 10.4059 2.72518 10.3653 2.78443C10.2841 2.90291 10.171 3.0746 10.0367 3.29616C9.76833 3.73902 9.41434 4.38271 9.06142 5.20031C8.35613 6.83422 7.65 9.17483 7.65 12H9.15ZM3.567 15.9H12V14.4H3.567V15.9ZM3.567 9.60004H20.433V8.10004H3.567V9.60004ZM20.498 17.9639C20.4792 17.9524 20.4575 17.9252 20.4597 17.8727C20.4609 17.8434 20.4715 17.7772 20.5297 17.7054C20.5961 17.6235 20.6889 17.5797 20.7655 17.5709L20.9357 19.0613C21.6167 18.9835 21.9384 18.4179 21.9584 17.9346C21.9776 17.4682 21.7476 16.9717 21.2842 16.6865L20.498 17.9639ZM20.7661 17.5709L18.4558 17.8328L18.6248 19.3232L20.9351 19.0613L20.7661 17.5709ZM17.8689 18.2438L16.833 20.3246L18.1758 20.9931L19.2117 18.9123L17.8689 18.2438ZM16.8327 20.3252C16.8668 20.2565 16.9395 20.1839 17.0398 20.1492C17.1277 20.1188 17.194 20.1316 17.2221 20.1405C17.272 20.1564 17.2896 20.1857 17.294 20.2069L15.8248 20.5095C15.9345 21.0419 16.322 21.4281 16.7668 21.5697C17.2286 21.7168 17.8707 21.6073 18.1761 20.9925L16.8327 20.3252ZM17.2941 20.2074L16.1646 14.703L14.6952 15.0046L15.8247 20.509L17.2941 20.2074ZM16.1644 14.7023C16.1723 14.7406 16.1666 14.883 16.0232 14.9833C15.88 15.0835 15.7446 15.0402 15.7114 15.0198L16.4984 13.7428C16.0899 13.4911 15.5724 13.468 15.1633 13.7543C14.754 14.0407 14.5984 14.535 14.6954 15.0053L16.1644 14.7023ZM15.712 15.0201L20.4982 17.964L21.284 16.6864L16.4978 13.7425L15.712 15.0201Z\"\r\n fill=\"#475467\" />\r\n </svg> {{selectedIssue}}\r\n </span>\r\n <!-- (click)=\"chooseanissue('')\" -->\r\n <div class=\"position-relative\">\r\n <div (click)=\"openDropdown($event)\"\r\n class=\"maincard-content cursor-pointer bg-white px-3 py-2\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </div>\r\n <div *ngIf=\"dropDown\" class=\"card py-1 w-200px position-absolute top-50px end-0\">\r\n <ul *ngFor=\"let item of dropdownItems\" class=\"list-unstyled\">\r\n <li [ngClass]=\"this.selectedIssue === item ? 'active' : ''\"\r\n class=\"camera px-5 items fw-semibold cursor-pointer py-3\"\r\n (click)=\"selectItem(item)\">\r\n {{item}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div\r\n *ngIf=\"selectedIssue === 'Internet Issues'||selectedIssue === 'Camera Issues'||selectedIssue === 'System Issues' \">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\" *ngIf=\"secondaryIssues?.length>0\"> Please\r\n select the\r\n relevant problem facing from the following </div>\r\n <div *ngFor=\"let issue of secondaryIssues; let index = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer \"\r\n (click)=\"toggleCheckbox(index)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{issue?.name}}</span>\r\n <span class=\"w-300px\" [ngbTooltip]=\"tooltipContent\" triggers=\"mouseenter:mouseleave\"\r\n placement=\"left\">\r\n <svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <!-- Define tooltip content -->\r\n <ng-template #tooltipContent>\r\n <div class=\"tooltip-content w-100\">\r\n <ul>\r\n <li class=\"w-100\" *ngFor=\"let tooltipItem of issue?.toolTips\">{{\r\n tooltipItem?.name }}</li>\r\n </ul>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"checkbox\" [checked]=\"issue.checked\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"0\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedIssue === 'Others'\">\r\n <div class=\"maincard-content w-100 mt-2 px-4 py-2 pb-4 mb-5\">\r\n <div class=\"maincard-label fw-semibold py-2\">Please select the relevant problem facing from\r\n the\r\n following</div>\r\n <div *ngFor=\"let others of othersIssue; let i = index\"\r\n class=\"maincard-content d-flex justify-content-between align-items-center w-100 mt-2 px-4 py-4 cursor-pointer\"\r\n (click)=\"toggleRadiobox(others)\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span><img class=\"pe-3\" src='./assets/tango/Images/Featured icon.png'></span>\r\n <span class=\"headingtext\">{{others.name}}</span>\r\n <span><svg class=\"ms-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1826_44871)\">\r\n <path\r\n d=\"M8.00065 10.6673V8.00065M8.00065 5.33398H8.00732M14.6673 8.00065C14.6673 11.6826 11.6826 14.6673 8.00065 14.6673C4.31875 14.6673 1.33398 11.6826 1.33398 8.00065C1.33398 4.31875 4.31875 1.33398 8.00065 1.33398C11.6826 1.33398 14.6673 4.31875 14.6673 8.00065Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1826_44871\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"roundedcheck d-flex align-items-center\">\r\n <input type=\"radio\" name=\"radioGroup{{i}}\" [value]=\"others.name\"\r\n [(ngModel)]=\"selectedOption\" class=\"p-0\">\r\n </div>\r\n </div>\r\n <div class=\"form-group pt-6\">\r\n <label for=\"hiberntion\" class=\" maincard-label fw-semibold mb-2\">Hibernation (in days)\r\n *</label>\r\n <div class=\" w-250px position-relative\">\r\n <div class=\"position-absolute translate-middle-y top-50 me-5 ps-3 ticketDays\">\r\n <span class=\"svg-icon toggle-off svg-icon-1\" [ngClass]=\"count === 0 ? 'pe-none' : ''\" (click)=\"decreseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M4.66602 10H16.3327\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <input type=\"text\" class=\"form-control\" id=\"hiberntion\" [(ngModel)]=\"Hibernation\"\r\n style=\"text-align: center;\" value=\"{{count}}\" placeholder=\"\" readOnly />\r\n <div class=\"position-absolute translate-middle-y top-50 end-0 me-3\">\r\n <span class=\"svg-icon toggle-on svg-icon-1 ticketDays\"\r\n (click)=\"increaseCount()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\"\r\n viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M10.4993 4.1665V15.8332M4.66602 9.99984H16.3327\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <div *ngFor=\"let obj of viewTicketData;let i=index\">\r\n\r\n <!-- Horizontal line with day -->\r\n\r\n <!-- <div class=\"d-flex align-items-center justify-content-between\">\r\n <div class=\"border border-1 border-gray p-0 w-100 me-3\"></div>\r\n <span class=\"text-day fw-bold-400\">Today</span>\r\n <div class=\"border border-1 border-gray p-0 w-100 ms-3\"></div>\r\n </div> -->\r\n\r\n <!-- User code start -->\r\n <div *ngIf=\"obj.actionBy === 'User'\" class=\"d-flex ms-5 mb-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div>\r\n <div class=\"d-flex\">\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate px-3 pt-1 fw-bold-400\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <span *ngIf=\"obj.actionType !=='statusChange'\"\r\n class=\"profile-label font-bold-400\">User has replied</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'statusCheckReply'\">\r\n <div class=\"textupdates fw-bold-400 mt-3\">Issue has been <b><span\r\n *ngIf=\"obj.statusCheckReply==='No'\">not</span> resolved.</b>\r\n\r\n </div>\r\n <div class=\"textupdates fw-bold-400\" *ngIf=\"obj.statusCheckReply==='No'\"> It takes\r\n {{obj?.hibernationDays}} more days to resolve.</div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div *ngIf=\"notworkingCamaralist && notworkingCamaralist?.length\" class=\"row\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3 my-5\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n <div class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> to the Camera</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"res?.secondaryIssue && res?.secondaryIssue?.length\" class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- User code end -->\r\n <!-- Tango code start -->\r\n <div *ngIf=\"obj.actionBy === 'Tango'\" class=\"d-flex mb-5 ms-5\">\r\n <div class=\"d-flex flex-column justify-content-center align-items-center pe-3\">\r\n <div class=\"d-flex align-items-centre justify-content-centre\">\r\n <div class=\"symbol symbol-48px symbol-circle\" *ngIf=\"obj?.IdentifiedBy&&obj?.IdentifiedBy!==''&&obj?.IdentifiedBy!=='Tango'\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{obj?.IdentifiedBy?.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <img *ngIf=\"!obj?.IdentifiedBy||obj?.IdentifiedBy===''||obj?.IdentifiedBy==='Tango'\" class=\"msgprofile\" src=\"./assets/tango/Images/tangoprofile.png\">\r\n \r\n </div>\r\n <div class=\"p-0 h-100 mt-3 border border-1 border-gray verticalLine\"></div>\r\n </div>\r\n <div class=\"py-3 pt-0\">\r\n <div class=\"d-flex\">\r\n <!-- {{obj.actionType}} -->\r\n <span class=\"headingtext fw-semibold\">{{obj?.IdentifiedBy?obj?.IdentifiedBy:\"Tango\"}}</span>\r\n <span class=\"updateddate fw-bold-400 px-3 pt-1\">{{obj?.timeStamp}}</span>\r\n </div>\r\n <div>\r\n <!-- <span class=\"profile-label fw-bold-400\">tango has replied to the issue</span> -->\r\n <div *ngIf=\"obj.actionType === 'statusChange'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Open -> Inprogress</span>\r\n </div>\r\n </div>\r\n <div class=\"mt-2\" *ngIf=\"obj.actionType === 'comment'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400 text-wrap\">{{obj?.comment}}</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckstart'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Started the</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'prerequestcheckfailed'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Process failed on</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check</span>\r\n </div>\r\n \r\n <div *ngIf=\"obj.actionType === 'fetchcamera'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\">Pre-Requisite Check -> Fetchcamera</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType === 'configure'\">\r\n <span class=\"timingtext pe-3 pt-1 fw-bold-400\">Updated the status</span><span\r\n class=\"timingtext fw-semibold text-primary\"> Fetchcamera -> Configuring</span>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='issueUpdate'\">\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"textupdates fw-semibold mt-3\">\r\n We're currently encountering an <span\r\n class=\"fw-bold-700\">{{res.primaryIssue}}</span>\r\n </div>\r\n <div *ngIf=\"res.primaryIssue ==='Camera Issues'\">\r\n <div class=\"row my-5\">\r\n <div *ngFor=\"let item of notworkingCamaralist\" class=\"col-sm-3\">\r\n <div class=\"rounded-3 overflow-hidden mt-2\">\r\n <span class=\"camera fw-bold\">{{item.cameraName}}</span>\r\n <img [src]=\"item?.thumbnailImage\" style=\"height:180px\">\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"textupdates fw-bold-400 mt-3 me-2\">The above camera streaming are not working due</span>\r\n <span class=\"textupdates fw-bold-700 mt-3\" *ngFor=\"let issue of res?.secondaryIssue; let last = last\">{{issue?.name}} <ng-container *ngIf=\"!last\"> ,</ng-container></span> <span class=\"textupdates fw-bold-400 mt-3\">to the Camera</span>\r\n\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"investigation fw-bold-400 mb-3\">The following are the relevant\r\n problem\r\n facing</div>\r\n <div class=\"mb-5\">\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"obj.actionType ==='stepsToResolve'\" class=\"mt-3\">\r\n <span class=\"textupdates fw-bold-400\">Please follow the below steps to resolve\r\n the above issue</span>\r\n <div *ngFor=\"let res of obj?.reasons\">\r\n <div class=\"mt-5 mb-5\">\r\n <div class=\"headingtext fw-semibold mb-1\">{{res.primaryIssue}}</div>\r\n <ul class=\"timingtext fw-bold-400 mb-0\"\r\n *ngFor=\"let secIssues of res?.secondaryIssue\">\r\n <li>{{secIssues.name}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- Tango code end -->\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"showSubmit&&(gs.userAccess | async)?.manage_tickets_isEdit\" class=\"d-flex justify-content-between align-items-center mt-10\">\r\n <input class=\"form-control\" [(ngModel)]=\"comments\" (click)=\"addComment()\" type=\"text\"\r\n placeholder=\"Add your comments..\">\r\n\r\n <input type=\"file\" #fileInput style=\"display: none;\" accept=\"image/*\" multiple (change)=\"onFileSelected($event)\">\r\n <button (click)=\"openFileInput()\" class=\"cursor-pointer btn btn-default btn-outline ms-3\"><svg\r\n 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.20835L10.2082 16.8667C9.27005 17.8049 7.99757 18.332 6.67075 18.332C5.34393 18.332 4.07145 17.8049 3.13325 16.8667C2.19505 15.9285 1.66797 14.656 1.66797 13.3292C1.66797 12.0024 2.19505 10.7299 3.13325 9.79168L10.7916 2.13335C11.4171 1.50788 12.2654 1.15649 13.1499 1.15649C14.0345 1.15649 14.8828 1.50788 15.5082 2.13335C16.1337 2.75882 16.4851 3.60713 16.4851 4.49168C16.4851 5.37623 16.1337 6.22455 15.5082 6.85002L7.84158 14.5083C7.52885 14.8211 7.10469 14.9968 6.66242 14.9968C6.22014 14.9968 5.79598 14.8211 5.48325 14.5083C5.17051 14.1956 4.99482 13.7715 4.99482 13.3292C4.99482 12.8869 5.17051 12.4627 5.48325 12.15L12.5582 5.08335\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n\r\n <button class=\"btn btn-primary ms-3\" (click)=\"updateTicket()\"> Submit </button>\r\n\r\n <button class=\"btn btn-default btn-outline ms-3 text-nowrap\"><span>\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_3917_54621)\">\r\n <path\r\n d=\"M7.57435 7.50008C7.77027 6.94314 8.15698 6.4735 8.66598 6.17436C9.17498 5.87521 9.77343 5.76586 10.3553 5.86567C10.9372 5.96549 11.465 6.26802 11.8452 6.71969C12.2255 7.17136 12.4336 7.74302 12.4327 8.33342C12.4327 10.0001 9.93268 10.8334 9.93268 10.8334M9.99935 14.1667H10.0077M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3917_54621\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> Can\u2019t able to reach the store?\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"errorMessage\" >{{ errorMessage }}</div>\r\n </div>\r\n <div class=\"col-sm-4\">\r\n <div class=\"border border-1 border-gray rounded-3 p-5 h-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"camera fw-semibold\">Attachments</div>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length ===0\"\r\n class=\"w-100 mt-10 mb-10 mh-60vh d-grid text-center mx-auto\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/taketicket.svg\">\r\n <span class=\"taketicket mt-2 fw-bold\">No Attachments </span>\r\n </div>\r\n <div *ngIf=\"ticketInfo?.attachments.length > 0\" class=\"row mt-10\">\r\n <div class=\"col-sm-6\" *ngFor=\"let file of ticketInfo?.attachments\">\r\n <div class=\"Attachment border border-1 border-gray w-100 rounded-2 overflow-hidden\">\r\n <img class=\"h-150px\" (click)=\"downloadimage(file?.signedUrl)\" [src]=\"file?.signedUrl\" alt=\"Selected Image\">\r\n <div class=\"d-grid border border-top-1 px-5 py-2\">\r\n <span class=\"imagename fw-bold\">{{file.filename}}</span>\r\n <!-- <span class=\"fw-bold-400 updateddate\">{{file.lastModifiedDateString}}</span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>", styles: [".nav-item .nav-link{font-size:16px!important;line-height:24px}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);padding:8px 12px}.nav-item .nav-link:hover{border:none}.rowbody{background:var(--Gray-50, #F9FAFB)}.symbol .symbol-label{width:48px!important;height:48px!important}.contenttext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.camera{color:var(--Gray-500, #344054);font-size:14px;line-height:20px}.textupdates{color:var(--Gray-500, #344054);font-size:16px;line-height:24px}.store-label{color:var(--Black, #101828);font-size:16px;line-height:24px}.card-label{font-size:18px!important}.text-sub{color:var(--Gray-700, #344054)!important;font-size:12px!important;line-height:18px!important;font-weight:500!important}.text-day{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.maincard-content{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)}.maincard-label{color:var(--Gray-900, #101828);font-size:16px;line-height:24px}.openedissue{border-radius:6px;background:var(--Gray-50, #F9FAFB);padding:8px 12px}.imagename{color:var(--Gray-900, #101828);font-size:12px;line-height:18px}.updateddate{color:var(--Gray-500, #667085);font-size:12px;line-height:18px}.w-45{width:49%}input,textarea{padding:10px 14px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.msgprofile{width:48px!important;height:48px!important;border-radius:200px;overflow:hidden}.timingtext{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.profile-label{font-size:12px;color:var(--Gray-500, #667085);line-height:18px}.investigation{color:var(--Gray-500, #667085);font-size:16px;line-height:24px}.fw-bold-400{font-weight:400!important}.fw-bold-700{font-weight:700!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.card-label{color:#000!important;font-size:16px!important;line-height:24px}.roundedcheck input[type=checkbox]{width:16px!important;height:16px!important;border-radius:10px!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}.roundedcheck input[type=checkbox]:checked{outline:none;background-color:var(--primary-50, #00A3FF)}.roundedcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white;display:inline-block;width:4px;padding:5px 0 2px 3px;margin-top:2px}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.instal-failed{border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA);padding:16px}.instal-failed .main-text{color:var(--Error-700, #B42318);font-size:14px;font-weight:500;line-height:20px}.instal-failed .sub-text{color:var(--Error-600, #D92D20);font-size:14px;font-weight:400;line-height:20px}.text-primary{color:var(--Primary-700, #009BF3)!important}.verticalLine{width:0px;min-height:15px}\n"] }]
2926
2953
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: TicketsService }, { type: i0.ChangeDetectorRef }, { type: i2.ActivatedRoute }, { type: i3.ToastService }, { type: i4.GlobalStateService }], propDecorators: { fileInput: [{
2927
2954
  type: ViewChild,
2928
2955
  args: ['fileInput']