tango-app-ui-manage-stores 3.0.12-dev → 3.0.13-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 (17) hide show
  1. package/esm2022/lib/components/add-stores/add-stores.component.mjs +3 -3
  2. package/esm2022/lib/components/create-group/create-group.component.mjs +15 -4
  3. package/esm2022/lib/components/group-details/group-details.component.mjs +3 -3
  4. package/esm2022/lib/components/tango-manage-groups/tango-manage-groups.component.mjs +3 -3
  5. package/esm2022/lib/components/tango-manage-stores/tango-manage-stores.component.mjs +209 -227
  6. package/esm2022/lib/interfaces/store.interface.mjs +1 -1
  7. package/esm2022/lib/services/excel.service.mjs +1 -1
  8. package/esm2022/lib/services/stores.service.mjs +10 -3
  9. package/esm2022/lib/utils/filters/filters.component.mjs +155 -58
  10. package/fesm2022/tango-app-ui-manage-stores.mjs +391 -293
  11. package/fesm2022/tango-app-ui-manage-stores.mjs.map +1 -1
  12. package/lib/components/tango-manage-stores/tango-manage-stores.component.d.ts +7 -11
  13. package/lib/interfaces/store.interface.d.ts +1 -0
  14. package/lib/services/excel.service.d.ts +2 -2
  15. package/lib/services/stores.service.d.ts +5 -3
  16. package/lib/utils/filters/filters.component.d.ts +15 -12
  17. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-stores.mjs CHANGED
@@ -6,8 +6,7 @@ import * as i1$2 from '@angular/forms';
6
6
  import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
7
  import * as i1$3 from '@angular/router';
8
8
  import { NavigationEnd, RouterModule } from '@angular/router';
9
- import Swal from 'sweetalert2';
10
- import { map, catchError, throwError, BehaviorSubject, filter } from 'rxjs';
9
+ import { map, catchError, throwError, BehaviorSubject, Subject, takeUntil, filter } from 'rxjs';
11
10
  import * as i1$4 from 'tango-app-ui-metronics';
12
11
  import * as i1 from '@angular/common/http';
13
12
  import * as i4 from 'tango-app-ui-shared';
@@ -17,6 +16,7 @@ import * as XLSX from 'xlsx';
17
16
  import { read, utils } from 'xlsx';
18
17
  import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
19
18
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
19
+ import Swal from 'sweetalert2';
20
20
  import * as moment from 'moment-timezone';
21
21
  import * as i5$1 from '@angular-magic/ngx-gp-autocomplete';
22
22
  import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
@@ -27,6 +27,7 @@ class StoresService {
27
27
  http;
28
28
  gs;
29
29
  storeApiUrl = '';
30
+ userInfraApiUrl = '';
30
31
  middlewareApiUrl = '';
31
32
  constructor(http, gs) {
32
33
  this.http = http;
@@ -34,13 +35,19 @@ class StoresService {
34
35
  this.gs.environment.subscribe((env) => {
35
36
  if (env) {
36
37
  this.storeApiUrl = env.storeApiUrl;
38
+ this.userInfraApiUrl = env.userInfraApiUrl;
37
39
  this.middlewareApiUrl = env.middlewareApiUrl;
38
40
  }
39
41
  });
40
42
  }
41
- getStoreList(params) {
43
+ getStoreList(req) {
44
+ return this.http
45
+ .post(`${this.userInfraApiUrl}/storeInfraList`, req)
46
+ .pipe(map((response) => response), catchError(this.handleError));
47
+ }
48
+ getStoreListExport(req) {
42
49
  return this.http
43
- .get(`${this.storeApiUrl}/store-list`, { params: params })
50
+ .post(`${this.userInfraApiUrl}/storeInfraList`, req, { responseType: "arraybuffer" })
44
51
  .pipe(map((response) => response), catchError(this.handleError));
45
52
  }
46
53
  getStore(storeId) {
@@ -300,24 +307,35 @@ class CreateGroupComponent {
300
307
  this.activeModal.close();
301
308
  }
302
309
  else {
310
+ this.activeModal.close();
311
+ this.ts.getErrorToast('Unable to add Group');
303
312
  }
304
313
  },
305
- error: () => { },
314
+ error: () => {
315
+ this.activeModal.close();
316
+ this.ts.getErrorToast('Unable to add Group');
317
+ },
306
318
  complete: () => { },
307
319
  });
308
320
  }
309
321
  }
310
322
  else {
311
323
  if (this.groupForm.valid) {
312
- this.groupService.updateGroup(this.groupForm.value).subscribe({
324
+ this.groupService.updateGroup({ ...this.groupForm.value, ...{ clientId: this.$headerFilters.client } }).subscribe({
313
325
  next: (res) => {
314
326
  if (res && res.code == 200) {
315
327
  this.ts.getSuccessToast("Group updated successfully");
328
+ this.activeModal.close();
316
329
  }
317
330
  else {
331
+ this.activeModal.close();
332
+ this.ts.getErrorToast('Unable to update Group');
318
333
  }
319
334
  },
320
- error: () => { },
335
+ error: () => {
336
+ this.activeModal.close();
337
+ this.ts.getErrorToast('Unable to update Group');
338
+ },
321
339
  complete: () => { },
322
340
  });
323
341
  }
@@ -644,11 +662,11 @@ class TangoManageGroupsComponent {
644
662
  });
645
663
  }
646
664
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Router }, { token: i1$1.NgbModal }, { token: GroupService }, { token: i0.ChangeDetectorRef }, { token: i4.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
647
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\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\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 'NA'}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"groups?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button (click)=\"createGroup('add')\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Group</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Create Group</button>\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
665
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\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\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</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 <input *ngIf=\"groups?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button (click)=\"createGroup('add')\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Group</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Create Group</button>\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
648
666
  }
649
667
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, decorators: [{
650
668
  type: Component,
651
- args: [{ selector: "lib-tango-manage-groups", template: "<div class=\"card mb-10\">\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\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 'NA'}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input *ngIf=\"groups?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button (click)=\"createGroup('add')\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Group</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Create Group</button>\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"] }]
669
+ args: [{ selector: "lib-tango-manage-groups", template: "<div class=\"card mb-10\">\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\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</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 <input *ngIf=\"groups?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button (click)=\"createGroup('add')\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Create Group</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Create Group</button>\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"] }]
652
670
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Router }, { type: i1$1.NgbModal }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i4.GlobalStateService }], propDecorators: { dataEvent: [{
653
671
  type: Output
654
672
  }] } });
@@ -816,41 +834,41 @@ class GroupDetailsComponent {
816
834
  }
817
835
  }
818
836
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GroupDetailsComponent, deps: [{ token: i1$3.Router }, { token: StoresService }, { token: GroupService }, { token: i0.ChangeDetectorRef }, { token: i4.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
819
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: GroupDetailsComponent, selector: "lib-group-details", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" class=\"form-control ps-14 me-2\" name=\"search\"\r\n autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button type=\"button\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container>\r\n <!-- *ngIf=\"!loading && !noData\"> -->\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n <div class=\"table-sub\">{{store?.storeProfile?.city}},\r\n {{store?.storeProfile?.state}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\" data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"loading && !noData\">\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 && !loading\">\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>\r\n</div>", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }] });
837
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: GroupDetailsComponent, selector: "lib-group-details", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" class=\"form-control ps-14 me-2\" name=\"search\"\r\n autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button type=\"button\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n <div class=\"table-sub\">{{store?.storeProfile?.city}},\r\n {{store?.storeProfile?.state}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\" data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n } @else if(loading && !noData) {\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n } @else if(noData && !loading) {\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 }\r\n </div>\r\n</div>", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.img-src{width:25%;height:20%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }] });
820
838
  }
821
839
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GroupDetailsComponent, decorators: [{
822
840
  type: Component,
823
- args: [{ selector: "lib-group-details", template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" class=\"form-control ps-14 me-2\" name=\"search\"\r\n autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button type=\"button\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container>\r\n <!-- *ngIf=\"!loading && !noData\"> -->\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n <div class=\"table-sub\">{{store?.storeProfile?.city}},\r\n {{store?.storeProfile?.state}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\" data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"loading && !noData\">\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 && !loading\">\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>\r\n</div>", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}\n"] }]
841
+ args: [{ selector: "lib-group-details", template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" class=\"form-control ps-14 me-2\" name=\"search\"\r\n autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n <button type=\"button\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n <div class=\"table-sub\">{{store?.storeProfile?.city}},\r\n {{store?.storeProfile?.state}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\" data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n } @else if(loading && !noData) {\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n } @else if(noData && !loading) {\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 }\r\n </div>\r\n</div>", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.img-src{width:25%;height:20%}\n"] }]
824
842
  }], ctorParameters: () => [{ type: i1$3.Router }, { type: StoresService }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i4.GlobalStateService }], propDecorators: { dataEvent: [{
825
843
  type: Output
826
844
  }] } });
827
845
 
828
846
  class FiltersComponent {
829
- elementRef;
830
- renderer;
831
- router;
832
- dataObject = [];
847
+ storesService;
848
+ dataObject;
833
849
  AppliedFilters = new EventEmitter();
834
850
  Opendropdown = false;
835
- permission = [
836
- {
837
- group: "Super Admin",
838
- description: "Lorem ipsum dolor sit amet, consectetur ",
839
- },
840
- { group: "Admin", description: "Lorem ipsum dolor sit amet, consectetur " },
841
- { group: "User", description: "Lorem ipsum dolor sit amet, consectetur " },
842
- ];
843
851
  showdropdown;
844
852
  selectedValues = [];
845
853
  selectedValuesArray = [];
846
854
  searchValue;
847
- dummyArray = [];
855
+ backUpArray = [];
848
856
  noFilter = false;
849
857
  responseArray = [];
850
- constructor(elementRef, renderer, router) {
851
- this.elementRef = elementRef;
852
- this.renderer = renderer;
853
- this.router = router;
858
+ cityIndex;
859
+ stateIndex;
860
+ countryIndex;
861
+ constructor(storesService) {
862
+ this.storesService = storesService;
863
+ }
864
+ ngOnChanges(changes) {
865
+ if (changes.dataObject && changes.dataObject.currentValue) {
866
+ this.backUpArray = JSON.parse(JSON.stringify(this.dataObject));
867
+ this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
868
+ this.dataObject.forEach((item, index) => {
869
+ this.selectedValuesArray[index] = item.selected.map((x) => x.text);
870
+ });
871
+ }
854
872
  }
855
873
  onClick(event) {
856
874
  const target = event.target;
@@ -864,11 +882,13 @@ class FiltersComponent {
864
882
  }
865
883
  }
866
884
  ngOnInit() {
867
- this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
885
+ this.backUpArray = JSON.parse(JSON.stringify(this.dataObject));
868
886
  this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
887
+ this.countryIndex = this.dataObject.findIndex(option => option.Description === "Country");
888
+ this.stateIndex = this.dataObject.findIndex(option => option.Description === "State");
889
+ this.cityIndex = this.dataObject.findIndex(option => option.Description === "City");
869
890
  }
870
891
  opendropdown(e) {
871
- console.log(687);
872
892
  e.stopPropagation();
873
893
  this.Opendropdown = !this.Opendropdown;
874
894
  }
@@ -880,63 +900,158 @@ class FiltersComponent {
880
900
  }
881
901
  });
882
902
  this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
883
- // if (this.dataObject[index].isOpen) {
884
- // document.addEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
885
- // } else {
886
- // document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
887
- // }
888
- }
889
- // clickOutsideDropdownContent(index: number, event: Event) {
890
- // if (!this.elementRef.nativeElement.contains(event.target as Node)) {
891
- // this.dataObject[index].isOpen = false;
892
- // document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
893
- // }
894
- // }
895
- toggleCheckbox(issue, index) {
903
+ }
904
+ toggleCheckboxs(issue, index) {
896
905
  const currentIssues = this.dataObject[index].Issues;
897
- this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
898
- const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
906
+ const selectedValues = this.selectedValuesArray[index] || [];
899
907
  if (issue === "Select All") {
900
- const currentIssues = this.dataObject[index].Issues.map((item) => item.text);
901
- if (selectedValues.length === currentIssues.length) {
902
- // If all items are already selected, deselect all
903
- this.selectedValuesArray[index] = [];
904
- }
905
- else {
906
- // Otherwise, select all items
907
- this.selectedValuesArray[index] = [...currentIssues];
908
- }
908
+ const currentIssueTexts = currentIssues.map((item) => item.text);
909
+ this.selectedValuesArray[index] =
910
+ selectedValues.length === currentIssueTexts.length
911
+ ? []
912
+ : [...currentIssueTexts];
909
913
  }
910
914
  else {
911
- if (selectedValues.includes(issue)) {
912
- this.selectedValuesArray[index] = selectedValues.filter((item) => item !== issue); // Deselect the individual item if already selected
915
+ const updatedSelectedValues = new Set(selectedValues);
916
+ if (updatedSelectedValues.has(issue)) {
917
+ updatedSelectedValues.delete(issue);
913
918
  }
914
919
  else {
915
- this.selectedValuesArray[index].push(issue); // Select the individual item if not already selected
920
+ updatedSelectedValues.add(issue);
916
921
  }
922
+ this.selectedValuesArray[index] = Array.from(updatedSelectedValues);
917
923
  }
918
- // Update "Select All" checkbox status based on selected values
919
924
  const selectAllId = `selectall${index}`;
920
925
  const selectAllElement = document.getElementById(selectAllId);
921
926
  if (selectAllElement) {
922
927
  selectAllElement.checked = selectedValues.length === currentIssues.length;
923
928
  }
924
- // Update checkboxes based on selected values
925
929
  currentIssues.forEach((item) => {
926
- const isChecked = this.selectedValuesArray[index].includes(item);
927
- const checkboxId = `option${item}`;
930
+ const isChecked = selectedValues.includes(item.text);
931
+ const checkboxId = `option${item.text}`;
928
932
  const checkboxElement = document.getElementById(checkboxId);
929
933
  if (checkboxElement) {
930
934
  checkboxElement.checked = isChecked;
931
935
  }
932
936
  });
933
937
  }
938
+ toggleCheckbox(issue, index) {
939
+ const currentIssues = this.dataObject[index].Issues;
940
+ const selectedValues = this.selectedValuesArray[index] || [];
941
+ if (selectedValues.includes(issue)) {
942
+ this.selectedValuesArray[index] = selectedValues.filter((item) => item !== issue);
943
+ }
944
+ else {
945
+ this.selectedValuesArray[index] = [issue];
946
+ }
947
+ currentIssues.forEach((item) => {
948
+ const isChecked = selectedValues.includes(item.text);
949
+ const checkboxId = `option${item.text}`;
950
+ const checkboxElement = document.getElementById(checkboxId);
951
+ if (checkboxElement) {
952
+ checkboxElement.checked = isChecked;
953
+ }
954
+ });
955
+ }
956
+ countrySelection(issue, i) {
957
+ if (this.dataObject[i].Description == 'Country') {
958
+ if (this.selectedValuesArray[i]?.includes(issue.text)) {
959
+ this.getStates(issue.id);
960
+ }
961
+ else {
962
+ this.dataObject[this.cityIndex].Issues = [];
963
+ this.selectedValuesArray[this.cityIndex] = [];
964
+ this.dataObject[this.stateIndex].Issues = [];
965
+ this.selectedValuesArray[this.stateIndex] = [];
966
+ }
967
+ }
968
+ }
969
+ stateSelection(issue, i) {
970
+ if (this.dataObject[i].Description == 'State') {
971
+ if (this.selectedValuesArray[i]?.includes(issue.text)) {
972
+ const country = this.dataObject[this.countryIndex].Issues.filter((c) => c.text == this.selectedValuesArray[this.countryIndex][0])[0];
973
+ if (country) {
974
+ this.getCities(country.id, issue.id);
975
+ }
976
+ }
977
+ else {
978
+ this.dataObject[this.cityIndex].Issues = [];
979
+ this.selectedValuesArray[this.cityIndex] = [];
980
+ this.dataObject[this.stateIndex].Issues = [];
981
+ this.selectedValuesArray[this.stateIndex] = [];
982
+ }
983
+ }
984
+ }
985
+ getStates(countryCode) {
986
+ this.storesService.getStates({ country: countryCode }).subscribe({
987
+ next: (res) => {
988
+ if (res && res.code === 200) {
989
+ let extractedData = [];
990
+ for (const item of res.data) {
991
+ extractedData.push({
992
+ text: item.name,
993
+ id: item.isoCode,
994
+ });
995
+ }
996
+ this.dataObject[this.stateIndex].Issues = extractedData;
997
+ this.selectedValuesArray[this.stateIndex] = [];
998
+ this.getCities(countryCode, extractedData[0].id);
999
+ }
1000
+ else {
1001
+ this.dataObject[this.stateIndex].Issues = [];
1002
+ this.selectedValuesArray[this.stateIndex] = [];
1003
+ }
1004
+ },
1005
+ error: () => {
1006
+ this.dataObject[this.stateIndex].Issues = [];
1007
+ this.selectedValuesArray[this.stateIndex] = [];
1008
+ },
1009
+ complete: () => { },
1010
+ });
1011
+ }
1012
+ getCities(countryCode, stateCode) {
1013
+ this.storesService
1014
+ .getCities({ country: countryCode, state: stateCode })
1015
+ .subscribe({
1016
+ next: (res) => {
1017
+ if (res && res.code === 200) {
1018
+ let extractedData = [];
1019
+ for (const item of res.data) {
1020
+ extractedData.push({
1021
+ text: item.name,
1022
+ id: item.isoCode,
1023
+ });
1024
+ }
1025
+ this.dataObject[this.cityIndex].Issues = extractedData;
1026
+ this.selectedValuesArray[this.cityIndex] = [];
1027
+ }
1028
+ else {
1029
+ this.dataObject[this.cityIndex].Issues = [];
1030
+ this.selectedValuesArray[this.cityIndex] = [];
1031
+ }
1032
+ },
1033
+ error: () => {
1034
+ this.dataObject[this.cityIndex].Issues = [];
1035
+ this.selectedValuesArray[this.cityIndex] = [];
1036
+ },
1037
+ complete: () => { },
1038
+ });
1039
+ }
934
1040
  Reset() {
935
1041
  this.selectedValuesArray = [];
1042
+ this.responseArray.forEach((item, index) => {
1043
+ this.responseArray[index].selected = [];
1044
+ });
1045
+ this.dataObject.forEach((item, index) => {
1046
+ this.dataObject[index].selected = [];
1047
+ });
1048
+ this.backUpArray.forEach((item, index) => {
1049
+ this.backUpArray[index].selected = [];
1050
+ });
936
1051
  this.Opendropdown = false;
937
1052
  }
938
1053
  searchData(event, i) {
939
- const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.text));
1054
+ const filteredIssues = this.backUpArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.text));
940
1055
  this.dataObject[i].Issues = filteredIssues;
941
1056
  if (filteredIssues.length) {
942
1057
  this.noFilter = false;
@@ -958,23 +1073,23 @@ class FiltersComponent {
958
1073
  }
959
1074
  this.Opendropdown = false;
960
1075
  this.selectedValuesArray.forEach((item, index) => {
961
- item = item.map((ele) => ele.text);
962
1076
  this.selectedValuesArray[index] = item;
963
1077
  });
964
1078
  this.responseArray.forEach((item, index) => {
965
- item.Issues = this.selectedValuesArray[index]
1079
+ delete item.isOpen;
1080
+ item.selected = this.selectedValuesArray[index]
966
1081
  ? this.selectedValuesArray[index]
967
1082
  : [];
968
1083
  });
969
1084
  this.AppliedFilters.emit(this.responseArray);
970
1085
  }
971
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
972
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1086
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: StoresService }], target: i0.ɵɵFactoryTarget.Component });
1087
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n @if(item.multiDropdown) {\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckboxs('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckboxs(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n </div>\r\n } @else {\r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" > No filters available</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
973
1088
  }
974
1089
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
975
1090
  type: Component,
976
- args: [{ selector: "lib-filters-custom", template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
977
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.Router }], propDecorators: { dataObject: [{
1091
+ args: [{ selector: "lib-filters-custom", template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n @if(item.multiDropdown) {\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckboxs('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckboxs(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n </div>\r\n } @else {\r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" > No filters available</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
1092
+ }], ctorParameters: () => [{ type: StoresService }], propDecorators: { dataObject: [{
978
1093
  type: Input
979
1094
  }], AppliedFilters: [{
980
1095
  type: Output
@@ -991,78 +1106,22 @@ class TangoManageStoresComponent {
991
1106
  gs;
992
1107
  router;
993
1108
  // Table
994
- filterOptions = [
995
- {
996
- Description: "Completeness",
997
- Issues: [
998
- { text: "25%", id: "1" },
999
- { text: "50%", id: "2" },
1000
- { text: "75%", id: "3" },
1001
- { text: "100%", id: "4" },
1002
- ],
1003
- },
1004
- {
1005
- Description: "Status",
1006
- Issues: [
1007
- { text: "Live", id: "1" },
1008
- { text: "Onboarded", id: "2" },
1009
- { text: "Paired", id: "3" },
1010
- { text: "Installation Failed", id: "4" },
1011
- { text: "Infra Issue", id: "5" },
1012
- { text: "Deactivated", id: "6" },
1013
- ],
1014
- },
1015
- {
1016
- Description: "Issue",
1017
- Issues: [
1018
- { text: "Application Issue", id: "1" },
1019
- { text: "Camera Issue", id: "2" },
1020
- { text: "Internet Issue", id: "3" },
1021
- { text: "Store Operation", id: "4" },
1022
- { text: "System Issue", id: "5" },
1023
- ],
1024
- },
1025
- {
1026
- Description: "Issue Types",
1027
- Issues: [
1028
- { text: "Pending from Client", id: "1" },
1029
- { text: "Pending from Tango", id: "2" },
1030
- ],
1031
- },
1032
- {
1033
- Description: "Country",
1034
- Issues: [],
1035
- },
1036
- {
1037
- Description: "State",
1038
- Issues: [],
1039
- },
1040
- {
1041
- Description: "City",
1042
- Issues: [],
1043
- },
1044
- ];
1109
+ filterOptions;
1045
1110
  searchValue;
1046
1111
  storeList = [];
1047
1112
  storeList_req;
1048
- pagination;
1113
+ pagination = {
1114
+ offset: 1,
1115
+ limit: 10,
1116
+ totalCount: 0,
1117
+ };
1049
1118
  loading = true;
1050
1119
  noData = false;
1051
- supportEmail;
1052
- columns = [
1053
- {
1054
- column: "storeId",
1055
- direction: 1,
1056
- },
1057
- {
1058
- column: "storeProfile.address",
1059
- direction: 0,
1060
- },
1061
- ];
1120
+ columns;
1062
1121
  paginationSizes = [10, 20, 30];
1063
- // selectedtab :any= '';
1064
1122
  receivedData = "stores";
1065
1123
  $headerFilters;
1124
+ detach = new Subject();
1066
1125
  constructor(pageInfo, storesService, changeDetector, excelService, gs, router) {
1067
1126
  this.pageInfo = pageInfo;
1068
1127
  this.storesService = storesService;
@@ -1070,12 +1129,10 @@ class TangoManageStoresComponent {
1070
1129
  this.excelService = excelService;
1071
1130
  this.gs = gs;
1072
1131
  this.router = router;
1073
- this.gs.environment.subscribe((env) => {
1074
- if (env) {
1075
- this.supportEmail = env.support_email;
1076
- }
1077
- });
1078
- this.getCountries();
1132
+ }
1133
+ ngOnDestroy() {
1134
+ this.detach.next(true);
1135
+ this.detach.complete();
1079
1136
  }
1080
1137
  receiveGroupData(data) {
1081
1138
  this.receivedData = data;
@@ -1089,27 +1146,140 @@ class TangoManageStoresComponent {
1089
1146
  ]);
1090
1147
  }
1091
1148
  ngOnInit() {
1092
- this.gs.dataRangeValue.subscribe({
1149
+ this.filterOptions = [
1150
+ {
1151
+ Description: "Completeness",
1152
+ multiDropdown: true,
1153
+ Issues: [
1154
+ { text: "25%", id: "25" },
1155
+ { text: "50%", id: "50" },
1156
+ { text: "75%", id: "75" },
1157
+ { text: "100%", id: "100" },
1158
+ ],
1159
+ selected: []
1160
+ },
1161
+ {
1162
+ Description: "Status",
1163
+ multiDropdown: true,
1164
+ Issues: [
1165
+ { text: "Live", id: "live" },
1166
+ { text: "Onboarded", id: "onboarded" },
1167
+ { text: "Paired", id: "paired" },
1168
+ { text: "Installation Failed", id: "installationfailed" },
1169
+ { text: "Infra Issue", id: "infra" },
1170
+ { text: "Deactivated", id: "deactivated" },
1171
+ ],
1172
+ selected: []
1173
+ },
1174
+ {
1175
+ Description: "Issue",
1176
+ multiDropdown: true,
1177
+ Issues: [
1178
+ { text: "Application Issue", id: "application" },
1179
+ { text: "Camera Issue", id: "camera" },
1180
+ { text: "Internet Issue", id: "internet" },
1181
+ { text: "Store Operation", id: "store" },
1182
+ { text: "System Issue", id: "system" },
1183
+ ],
1184
+ selected: []
1185
+ },
1186
+ // {
1187
+ // Description: "Issue Types",
1188
+ // multiDropdown: true,
1189
+ // Issues: [
1190
+ // { text: "Pending from Client", id: "pendingclient" },
1191
+ // { text: "Pending from Tango", id: "pendingtango" },
1192
+ // ],
1193
+ // selected: []
1194
+ // },
1195
+ {
1196
+ Description: "Country",
1197
+ multiDropdown: false,
1198
+ Issues: [],
1199
+ selected: []
1200
+ },
1201
+ {
1202
+ Description: "State",
1203
+ multiDropdown: false,
1204
+ Issues: [],
1205
+ selected: []
1206
+ },
1207
+ {
1208
+ Description: "City",
1209
+ multiDropdown: true,
1210
+ Issues: [],
1211
+ selected: []
1212
+ },
1213
+ ];
1214
+ this.columns = [
1215
+ {
1216
+ column: "storeId",
1217
+ direction: 1,
1218
+ },
1219
+ {
1220
+ column: "city",
1221
+ direction: 0,
1222
+ },
1223
+ {
1224
+ column: "spocContact",
1225
+ direction: 0,
1226
+ },
1227
+ {
1228
+ column: "downTime",
1229
+ direction: 0,
1230
+ },
1231
+ {
1232
+ column: "status",
1233
+ direction: 0,
1234
+ },
1235
+ {
1236
+ column: "statusDetail",
1237
+ direction: 0,
1238
+ },
1239
+ ];
1240
+ this.gs.dataRangeValue.pipe(takeUntil(this.detach)).subscribe({
1093
1241
  next: (data) => {
1094
- this.$headerFilters = data;
1095
- this.storeList_req = {
1096
- clientId: data?.client,
1097
- fromDate: data?.date?.startDate || new Date().toISOString().split("T")[0],
1098
- toDate: data?.date?.endDate || new Date().toISOString().split("T")[0],
1099
- limit: 10,
1100
- offset: 1,
1101
- sortBy: "storeId",
1102
- sortOrder: 1,
1103
- search: "",
1104
- };
1105
- this.pagination = {
1106
- offset: 1,
1107
- limit: 10,
1108
- totalCount: 0,
1109
- totalPages: 0,
1110
- };
1111
- this.loadTable();
1242
+ if (data) {
1243
+ this.$headerFilters = data;
1244
+ this.getCountries();
1245
+ this.storeList_req = {
1246
+ fromDate: this.$headerFilters.date?.startDate
1247
+ ? this.$headerFilters.date.startDate.split("-").reverse().join("-")
1248
+ : new Date()
1249
+ .toISOString()
1250
+ .split("T")[0]
1251
+ .split("-")
1252
+ .reverse()
1253
+ .join("-"),
1254
+ toDate: this.$headerFilters.date?.endDate
1255
+ ? this.$headerFilters.date.endDate.split("-").reverse().join("-")
1256
+ : new Date()
1257
+ .toISOString()
1258
+ .split("T")[0]
1259
+ .split("-")
1260
+ .reverse()
1261
+ .join("-"),
1262
+ clientId: [this.$headerFilters.client],
1263
+ offset: 1,
1264
+ limit: 10,
1265
+ sortColumName: "storeId",
1266
+ sortBy: 1,
1267
+ searchValue: "",
1268
+ export: false,
1269
+ };
1270
+ this.loadTable();
1271
+ }
1272
+ else {
1273
+ this.loading = false;
1274
+ this.noData = true;
1275
+ this.changeDetector.detectChanges();
1276
+ }
1112
1277
  },
1278
+ error: () => {
1279
+ this.loading = false;
1280
+ this.noData = true;
1281
+ this.changeDetector.detectChanges();
1282
+ }
1113
1283
  });
1114
1284
  this.router.events
1115
1285
  .pipe(filter((event) => event instanceof NavigationEnd))
@@ -1124,87 +1294,57 @@ class TangoManageStoresComponent {
1124
1294
  this.setPageData();
1125
1295
  }
1126
1296
  searchStore() {
1127
- this.storeList_req.search = this.searchValue;
1297
+ this.storeList_req.searchValue = this.searchValue;
1128
1298
  this.loadTable();
1129
1299
  }
1130
1300
  Selecttabs(value) {
1131
1301
  this.receivedData = value;
1132
1302
  }
1133
- applyFilter(filters) {
1134
- this.loadTable();
1135
- }
1136
- getCountries() {
1137
- this.storesService.getCountries().subscribe({
1138
- next: (res) => {
1139
- if (res && res.code === 200) {
1140
- let extractedData = [];
1141
- for (const item of res.data) {
1142
- extractedData.push({
1143
- text: item.name,
1144
- id: item.isoCode
1145
- });
1146
- }
1147
- this.filterOptions[4].Issues = extractedData;
1148
- this.getStates();
1149
- }
1150
- else {
1151
- this.filterOptions[4].Issues = [];
1152
- }
1153
- },
1154
- error: () => {
1155
- this.filterOptions[4].Issues = [];
1156
- },
1157
- complete: () => {
1303
+ applyFilter(appliedFilters) {
1304
+ let issuesObject = {
1305
+ completeness: [],
1306
+ status: [],
1307
+ issue: [],
1308
+ country: [],
1309
+ state: [],
1310
+ city: []
1311
+ };
1312
+ appliedFilters.forEach((option, index) => {
1313
+ this.filterOptions[index].selected = option.selected;
1314
+ const key = option.Description.toLowerCase();
1315
+ if (key === "country" || key === "state" || key === "city") {
1316
+ issuesObject[key] = option.selected.map((x) => x.text);
1158
1317
  }
1159
- });
1160
- }
1161
- getStates() {
1162
- this.storesService.getStates({ country: 'IN' }).subscribe({
1163
- next: (res) => {
1164
- if (res && res.code === 200) {
1165
- let extractedData = [];
1166
- for (const item of res.data) {
1167
- extractedData.push({
1168
- text: item.name,
1169
- id: item.isoCode
1170
- });
1171
- }
1172
- this.filterOptions[5].Issues = extractedData;
1173
- this.getCities();
1174
- }
1175
- else {
1176
- this.filterOptions[5].Issues = [];
1177
- }
1178
- },
1179
- error: () => {
1180
- this.filterOptions[5].Issues = [];
1181
- },
1182
- complete: () => {
1318
+ else {
1319
+ issuesObject[key] = option.selected.map((x) => x.id);
1183
1320
  }
1184
1321
  });
1322
+ this.changeDetector.detectChanges();
1323
+ this.storeList_req = { ...this.storeList_req, ...issuesObject };
1324
+ this.loadTable();
1185
1325
  }
1186
- getCities() {
1187
- this.storesService.getCities({ country: 'IN', state: 'TN' }).subscribe({
1326
+ getCountries() {
1327
+ const countryIndex = this.filterOptions.findIndex(option => option.Description === "Country");
1328
+ this.storesService.getCountries().subscribe({
1188
1329
  next: (res) => {
1189
1330
  if (res && res.code === 200) {
1190
1331
  let extractedData = [];
1191
1332
  for (const item of res.data) {
1192
1333
  extractedData.push({
1193
1334
  text: item.name,
1194
- id: item.isoCode
1335
+ id: item.isoCode,
1195
1336
  });
1196
1337
  }
1197
- this.filterOptions[6].Issues = extractedData;
1338
+ this.filterOptions[countryIndex].Issues = extractedData;
1198
1339
  }
1199
1340
  else {
1200
- this.filterOptions[6].Issues = [];
1341
+ this.filterOptions[countryIndex].Issues = [];
1201
1342
  }
1202
1343
  },
1203
1344
  error: () => {
1204
- this.filterOptions[6].Issues = [];
1345
+ this.filterOptions[countryIndex].Issues = [];
1205
1346
  },
1206
- complete: () => {
1207
- }
1347
+ complete: () => { },
1208
1348
  });
1209
1349
  }
1210
1350
  loadTable() {
@@ -1213,15 +1353,16 @@ class TangoManageStoresComponent {
1213
1353
  next: (res) => {
1214
1354
  this.loading = false;
1215
1355
  if (res && res.code === 200) {
1216
- this.storeList = res.data.results;
1356
+ this.storeList = res.data.result;
1217
1357
  this.pagination = {
1218
- offset: res.data.offset,
1219
- limit: res.data.limit,
1220
- totalCount: res.data.totalCount,
1221
- totalPages: res.data.totalPages,
1358
+ offset: res.data?.offset
1359
+ ? res?.data.offset
1360
+ : this.pagination.offset,
1361
+ limit: res.data?.limit ? res?.data.limit : this.pagination.limit,
1362
+ totalCount: res.data.count,
1222
1363
  };
1223
- if (res.data.totalCount < 10) {
1224
- this.paginationSizes = [res.data.totalCount];
1364
+ if (res.data.count < 10) {
1365
+ this.paginationSizes = [res.data.count];
1225
1366
  }
1226
1367
  else {
1227
1368
  this.paginationSizes = [10, 20, 30];
@@ -1236,7 +1377,6 @@ class TangoManageStoresComponent {
1236
1377
  offset: 1,
1237
1378
  limit: 10,
1238
1379
  totalCount: 0,
1239
- totalPages: 0,
1240
1380
  };
1241
1381
  // this.loading = false;
1242
1382
  this.noData = true;
@@ -1249,7 +1389,6 @@ class TangoManageStoresComponent {
1249
1389
  offset: 1,
1250
1390
  limit: 10,
1251
1391
  totalCount: 0,
1252
- totalPages: 0,
1253
1392
  };
1254
1393
  this.loading = false;
1255
1394
  this.noData = true;
@@ -1260,58 +1399,32 @@ class TangoManageStoresComponent {
1260
1399
  });
1261
1400
  }
1262
1401
  exportXLSX() {
1263
- if (this.pagination.totalCount > 10000) {
1264
- Swal.fire({
1265
- title: "Export Failed!",
1266
- heightAuto: false,
1267
- icon: "error",
1268
- html: `Looks Like the Data Is Huge, You Can Select a Smaller Date Range, or Please Reach Out to Tango <a href="${this.supportEmail}">${this.supportEmail}</a> for Further Assistance.`,
1269
- showCloseButton: true,
1270
- });
1271
- return;
1272
- }
1273
- let excelData = [];
1274
1402
  var req = {
1275
- clientId: this.$headerFilters.client,
1276
1403
  fromDate: this.$headerFilters.date?.startDate
1277
- ? this.$headerFilters.startDate
1278
- : new Date().toISOString().split("T")[0],
1404
+ ? this.$headerFilters.date.startDate.split("-").reverse().join("-")
1405
+ : new Date().toISOString().split("T")[0].split("-").reverse().join("-"),
1279
1406
  toDate: this.$headerFilters.date?.endDate
1280
- ? this.$headerFilters.endDate
1281
- : new Date().toISOString().split("T")[0],
1282
- limit: 10000,
1407
+ ? this.$headerFilters.date.endDate.split("-").reverse().join("-")
1408
+ : new Date().toISOString().split("T")[0].split("-").reverse().join("-"),
1409
+ clientId: [this.$headerFilters.client],
1283
1410
  offset: 1,
1284
- sortBy: "storeId",
1285
- sortOrder: 1,
1286
- search: "",
1411
+ limit: 10000,
1412
+ sortColumName: "storeId",
1413
+ sortBy: 1,
1414
+ searchValue: "",
1415
+ export: true,
1287
1416
  };
1288
- this.storesService.getStoreList(req).subscribe((res) => {
1289
- if (res && res.data && res.data.results && res.data.results.length) {
1290
- res.data.results.forEach((element) => {
1291
- excelData.push({
1292
- StoreId: element.storeId,
1293
- StoreName: element.storeName,
1294
- SpocName: element.spocDetails[0]?.name,
1295
- SpocEmail: element.spocDetails[0]?.email,
1296
- SpocPhone: element.spocDetails[0]?.contact,
1297
- appId: element.appId,
1298
- storeType: element.storeType?.type,
1299
- Location: element.storeProfile?.address || "",
1300
- country: element.storeProfile?.country || "",
1301
- state: element.storeProfile?.state || "",
1302
- city: element.storeProfile?.city || "",
1303
- pincode: element.storeProfile?.pincode || "",
1304
- });
1305
- });
1306
- this.excelService.exportAsExcelFile(excelData, "Store");
1417
+ this.storesService.getStoreListExport(req).subscribe((res) => {
1418
+ if (res) {
1419
+ this.excelService.saveAsExcelFile(res, "storesList");
1307
1420
  }
1308
1421
  });
1309
1422
  }
1310
1423
  navigateToStore(store) {
1311
- let data = JSON.parse(localStorage.getItem('header-filters') || '');
1424
+ let data = JSON.parse(localStorage.getItem("header-filters") || "");
1312
1425
  data.store = store.storeId;
1313
1426
  this.gs.dataRangeValue.next(data);
1314
- localStorage.setItem('header-filters', JSON.stringify(data));
1427
+ localStorage.setItem("header-filters", JSON.stringify(data));
1315
1428
  this.router.navigate([`manage/stores/${store.storeId}/settings`]);
1316
1429
  }
1317
1430
  onPageChange(pageOffset) {
@@ -1327,39 +1440,22 @@ class TangoManageStoresComponent {
1327
1440
  isLinkActive(link) {
1328
1441
  return this.router.isActive(link, true);
1329
1442
  }
1330
- editStore() { }
1331
- // onSort({ column, direction }: SortEvent | any) {
1332
- // console.log({column,direction})
1333
- // this.headers.forEach((header) => {
1334
- // if (header.sortable !== column) {
1335
- // header.direction = "";
1336
- // }
1337
- // });
1338
- // if (direction === "") {
1339
- // this.storeList_req.sortBy = "storeId";
1340
- // this.storeList_req.sortOrder = 1;
1341
- // } else {
1342
- // this.storeList_req.sortBy = column;
1343
- // this.storeList_req.sortOrder = (direction == "asc") ? 1 : -1;
1344
- // }
1345
- // this.loadTable();
1346
- // }
1347
1443
  onSort(column) {
1348
1444
  this.columns.forEach((el, i) => {
1349
1445
  if (el.column == column) {
1350
- this.storeList_req.sortBy = column;
1446
+ this.storeList_req.sortColumName = column;
1351
1447
  if (this.columns[i].direction == 0) {
1352
1448
  this.columns[i].direction = 1;
1353
- this.storeList_req.sortOrder = 1;
1449
+ this.storeList_req.sortBy = 1;
1354
1450
  }
1355
1451
  else if (this.columns[i].direction == 1) {
1356
1452
  this.columns[i].direction = -1;
1357
- this.storeList_req.sortOrder = -1;
1453
+ this.storeList_req.sortBy = -1;
1358
1454
  }
1359
1455
  else if (this.columns[i].direction == -1) {
1360
1456
  this.columns[i].direction = 0;
1361
- this.storeList_req.sortOrder = -1;
1362
- this.storeList_req.sortBy = "storeId";
1457
+ this.storeList_req.sortBy = -1;
1458
+ this.storeList_req.sortColumName = "storeId";
1363
1459
  }
1364
1460
  }
1365
1461
  else {
@@ -1372,7 +1468,7 @@ class TangoManageStoresComponent {
1372
1468
  return this.columns.filter((el) => el.column == column)[0].direction;
1373
1469
  }
1374
1470
  paginationSize() {
1375
- if (this.pagination.totalCount < 10) {
1471
+ if (this.pagination?.totalCount < 10) {
1376
1472
  return this.pagination.totalCount;
1377
1473
  }
1378
1474
  else {
@@ -1380,14 +1476,16 @@ class TangoManageStoresComponent {
1380
1476
  }
1381
1477
  }
1382
1478
  goToEdgeApp(store) {
1383
- this.router.navigate(['/manage/stores/edge-app/edge-email-journey'], { queryParams: { store: store._id } });
1479
+ this.router.navigate(["/manage/stores/edge-app/edge-email-journey"], {
1480
+ queryParams: { store: store._id },
1481
+ });
1384
1482
  }
1385
1483
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, deps: [{ token: i1$4.PageInfoService }, { token: StoresService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i4.GlobalStateService }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
1386
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\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\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (change)=\"searchStore()\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n <button type=\"button\" (click)=\"exportXLSX()\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </ng-container>\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add Store</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div (click)=\"navigateToStore(store);\" class=\"table-title cursor-pointer\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.storeProfile?.address) {\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n } @else {\r\n <div class=\"table-title\">NA</div>\r\n }\r\n @if (store?.storeProfile?.city && store?.storeProfile?.state) {\r\n <div *ngIf=\"\" class=\"table-sub\">{{store?.storeProfile?.city}},{{store?.storeProfile?.state}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact || 'NA'}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" (click)=\"navigateToStore(store);\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\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>\r\n </div>\r\n\r\n <div *ngIf=\"\" class=\"d-flex justify-content-center mt-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n <span class=\"illustcontent\"> Start by adding stores</span>\r\n <span class=\"text-sub\">You can view all your added stores here</span>\r\n <button class=\"btn btn-primary w-100 mt-10\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Add Stores</button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"\" *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:20%}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }] });
1484
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\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\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (change)=\"searchStore()\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n <button type=\"button\" (click)=\"exportXLSX()\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </ng-container>\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add Store</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div (click)=\"navigateToStore(store);\" class=\"table-title cursor-pointer\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city && store?.state && store?.country) {\r\n <div class=\"table-sub\">{{store?.city}},{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.city && store?.state) {\r\n <div class=\"table-sub\">{{store?.city}},{{store?.state}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" (click)=\"navigateToStore(store);\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\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>\r\n </div>\r\n</div>\r\n<div class=\"\" *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:20%}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }] });
1387
1485
  }
1388
1486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, decorators: [{
1389
1487
  type: Component,
1390
- args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\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\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (change)=\"searchStore()\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n <button type=\"button\" (click)=\"exportXLSX()\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </ng-container>\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add Store</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('storeProfile.address')\">Location\r\n <span *ngIf=\"colDirection('storeProfile.address')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeProfile.address')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th>SPOC Contact <span></span> </th>\r\n <th>Downtime <span></span> </th>\r\n <th>Status <span></span> </th>\r\n <th>Status Detail <span></span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div (click)=\"navigateToStore(store);\" class=\"table-title cursor-pointer\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.storeProfile?.address) {\r\n <div class=\"table-title\">{{store?.storeProfile?.address}}, </div>\r\n } @else {\r\n <div class=\"table-title\">NA</div>\r\n }\r\n @if (store?.storeProfile?.city && store?.storeProfile?.state) {\r\n <div *ngIf=\"\" class=\"table-sub\">{{store?.storeProfile?.city}},{{store?.storeProfile?.state}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocDetails[0]?.email || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocDetails[0]?.contact || 'NA'}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">Onboarded</span></td>\r\n <td>\r\n <div class=\"table-title\">Internet Issue</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" (click)=\"navigateToStore(store);\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\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>\r\n </div>\r\n\r\n <div *ngIf=\"\" class=\"d-flex justify-content-center mt-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n <span class=\"illustcontent\"> Start by adding stores</span>\r\n <span class=\"text-sub\">You can view all your added stores here</span>\r\n <button class=\"btn btn-primary w-100 mt-10\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Add Stores</button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"\" *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:20%}\n"] }]
1488
+ args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\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\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (change)=\"searchStore()\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n <button type=\"button\" (click)=\"exportXLSX()\"\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 <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n </ng-container>\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\"\r\n class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2 text-white\">Add Store</span> </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td>\r\n <div (click)=\"navigateToStore(store);\" class=\"table-title cursor-pointer\">{{store?.storeName}}</div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n 0%\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city && store?.state && store?.country) {\r\n <div class=\"table-sub\">{{store?.city}},{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.city && store?.state) {\r\n <div class=\"table-sub\">{{store?.city}},{{store?.state}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </td>\r\n <td class=\"fw-semibold\">NA</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <div class=\"table-sub\">Pending from Client</div>\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button style=\"border: none;background-color: white\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><button class=\"dropdown-item\" (click)=\"navigateToStore(store);\" type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\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>\r\n </div>\r\n</div>\r\n<div class=\"\" *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:20%}\n"] }]
1391
1489
  }], ctorParameters: () => [{ type: i1$4.PageInfoService }, { type: StoresService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i4.GlobalStateService }, { type: i1$3.Router }] });
1392
1490
 
1393
1491
  class AddStoresComponent {
@@ -1593,11 +1691,11 @@ class AddStoresComponent {
1593
1691
  return null;
1594
1692
  }
1595
1693
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddStoresComponent, deps: [{ token: StoresService }], target: i0.ɵɵFactoryTarget.Component });
1596
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddStoresComponent, selector: "lib-add-stores", viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-body d-flex flex-center flex-column p-9\">\r\n <div class=\"mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add stores </a>\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ul class=\"text-gray-400 fw-bold fs-6\">\r\n <li>Use the template to upload multiple stores at once.</li>\r\n <li>Download the template here -\r\n <a href=\"../../../../../../src/assets/files/storesUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li>Add your data to the Template File</li>\r\n <li>Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-wrap mb-5\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Add Multiple Stores</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" routerLink=\"/manage/stores/add-single-store\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1.18015 3.80378L1.1269 3.88695C0.568863 4.874 1.16469 6.12143 2.2363 6.26452C2.33339 6.27639 2.42373 6.28267 2.512 6.28267C3.09015 6.28267 3.60132 6.03465 3.95759 5.64792L4.51093 5.0473L5.06238 5.64965C5.41432 6.03407 5.92433 6.28267 6.50639 6.28267C7.08583 6.28267 7.59877 6.03372 7.95039 5.64965L8.50358 5.04541L9.05676 5.64965C9.40839 6.03372 9.92133 6.28267 10.5008 6.28267C11.0802 6.28267 11.5932 6.03372 11.9448 5.64965L12.498 5.04541L13.0511 5.64965C13.4028 6.03372 13.9157 6.28267 14.4952 6.28267C14.5805 6.28267 14.6736 6.27638 14.77 6.26462C15.8652 6.1153 16.463 4.80103 15.8243 3.80428C15.8242 3.80423 15.8242 3.80417 15.8242 3.80411L14.066 1.0627L14.066 1.0627L14.0651 1.06123C14.0499 1.0374 14.0124 1.01184 13.9652 1.01184H3.03581C2.98866 1.01184 2.95117 1.0374 2.93597 1.06124L2.93535 1.0622L1.18015 3.80378ZM14.1516 8.73706V11.869V12.619H13.4016H3.59943H2.84943V11.869V8.73753C2.7392 8.74573 2.62768 8.74994 2.51507 8.74994C2.47276 8.74994 2.43074 8.74931 2.389 8.74809V11.869V13.8035C2.389 14.4469 2.9229 14.988 3.59943 14.988H13.4016C14.0781 14.988 14.612 14.4469 14.612 13.8035V11.869V8.74827C14.5722 8.74937 14.5322 8.74994 14.4921 8.74994C14.3777 8.74994 14.2641 8.74559 14.1516 8.73706Z\" stroke=\"#344054\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single\r\n Store</span></label>\r\n </div>\r\n \r\n </div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;text-align:center;font-family:Inter;font-size:20px!important;font-weight:600;line-height:30px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px;list-style:decimal!important}::ng-deep .modal-content{border-radius:12px!important}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.or-condition{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
1694
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddStoresComponent, selector: "lib-add-stores", viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-body d-flex flex-center flex-column p-9\">\r\n <div class=\"mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add stores </a>\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ul class=\"text-gray-400 fw-bold fs-6\">\r\n <li>Use the template to upload multiple stores at once.</li>\r\n <li>Download the template here -\r\n <a href=\"../../assets/files/storesUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li>Add your data to the Template File</li>\r\n <li>Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-wrap mb-5\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Add Multiple Stores</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" routerLink=\"/manage/stores/add-single-store\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1.18015 3.80378L1.1269 3.88695C0.568863 4.874 1.16469 6.12143 2.2363 6.26452C2.33339 6.27639 2.42373 6.28267 2.512 6.28267C3.09015 6.28267 3.60132 6.03465 3.95759 5.64792L4.51093 5.0473L5.06238 5.64965C5.41432 6.03407 5.92433 6.28267 6.50639 6.28267C7.08583 6.28267 7.59877 6.03372 7.95039 5.64965L8.50358 5.04541L9.05676 5.64965C9.40839 6.03372 9.92133 6.28267 10.5008 6.28267C11.0802 6.28267 11.5932 6.03372 11.9448 5.64965L12.498 5.04541L13.0511 5.64965C13.4028 6.03372 13.9157 6.28267 14.4952 6.28267C14.5805 6.28267 14.6736 6.27638 14.77 6.26462C15.8652 6.1153 16.463 4.80103 15.8243 3.80428C15.8242 3.80423 15.8242 3.80417 15.8242 3.80411L14.066 1.0627L14.066 1.0627L14.0651 1.06123C14.0499 1.0374 14.0124 1.01184 13.9652 1.01184H3.03581C2.98866 1.01184 2.95117 1.0374 2.93597 1.06124L2.93535 1.0622L1.18015 3.80378ZM14.1516 8.73706V11.869V12.619H13.4016H3.59943H2.84943V11.869V8.73753C2.7392 8.74573 2.62768 8.74994 2.51507 8.74994C2.47276 8.74994 2.43074 8.74931 2.389 8.74809V11.869V13.8035C2.389 14.4469 2.9229 14.988 3.59943 14.988H13.4016C14.0781 14.988 14.612 14.4469 14.612 13.8035V11.869V8.74827C14.5722 8.74937 14.5322 8.74994 14.4921 8.74994C14.3777 8.74994 14.2641 8.74559 14.1516 8.73706Z\" stroke=\"#344054\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single\r\n Store</span></label>\r\n </div>\r\n \r\n </div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;text-align:center;font-family:Inter;font-size:20px!important;font-weight:600;line-height:30px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px;list-style:decimal!important}::ng-deep .modal-content{border-radius:12px!important}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.or-condition{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
1597
1695
  }
1598
1696
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddStoresComponent, decorators: [{
1599
1697
  type: Component,
1600
- args: [{ selector: "lib-add-stores", template: "<div class=\"card\">\r\n <div class=\"card-body d-flex flex-center flex-column p-9\">\r\n <div class=\"mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add stores </a>\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ul class=\"text-gray-400 fw-bold fs-6\">\r\n <li>Use the template to upload multiple stores at once.</li>\r\n <li>Download the template here -\r\n <a href=\"../../../../../../src/assets/files/storesUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li>Add your data to the Template File</li>\r\n <li>Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-wrap mb-5\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Add Multiple Stores</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" routerLink=\"/manage/stores/add-single-store\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1.18015 3.80378L1.1269 3.88695C0.568863 4.874 1.16469 6.12143 2.2363 6.26452C2.33339 6.27639 2.42373 6.28267 2.512 6.28267C3.09015 6.28267 3.60132 6.03465 3.95759 5.64792L4.51093 5.0473L5.06238 5.64965C5.41432 6.03407 5.92433 6.28267 6.50639 6.28267C7.08583 6.28267 7.59877 6.03372 7.95039 5.64965L8.50358 5.04541L9.05676 5.64965C9.40839 6.03372 9.92133 6.28267 10.5008 6.28267C11.0802 6.28267 11.5932 6.03372 11.9448 5.64965L12.498 5.04541L13.0511 5.64965C13.4028 6.03372 13.9157 6.28267 14.4952 6.28267C14.5805 6.28267 14.6736 6.27638 14.77 6.26462C15.8652 6.1153 16.463 4.80103 15.8243 3.80428C15.8242 3.80423 15.8242 3.80417 15.8242 3.80411L14.066 1.0627L14.066 1.0627L14.0651 1.06123C14.0499 1.0374 14.0124 1.01184 13.9652 1.01184H3.03581C2.98866 1.01184 2.95117 1.0374 2.93597 1.06124L2.93535 1.0622L1.18015 3.80378ZM14.1516 8.73706V11.869V12.619H13.4016H3.59943H2.84943V11.869V8.73753C2.7392 8.74573 2.62768 8.74994 2.51507 8.74994C2.47276 8.74994 2.43074 8.74931 2.389 8.74809V11.869V13.8035C2.389 14.4469 2.9229 14.988 3.59943 14.988H13.4016C14.0781 14.988 14.612 14.4469 14.612 13.8035V11.869V8.74827C14.5722 8.74937 14.5322 8.74994 14.4921 8.74994C14.3777 8.74994 14.2641 8.74559 14.1516 8.73706Z\" stroke=\"#344054\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single\r\n Store</span></label>\r\n </div>\r\n \r\n </div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;text-align:center;font-family:Inter;font-size:20px!important;font-weight:600;line-height:30px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px;list-style:decimal!important}::ng-deep .modal-content{border-radius:12px!important}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.or-condition{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}\n"] }]
1698
+ args: [{ selector: "lib-add-stores", template: "<div class=\"card\">\r\n <div class=\"card-body d-flex flex-center flex-column p-9\">\r\n <div class=\"mb-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\r\n <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n </div>\r\n </div>\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add stores </a>\r\n <div class=\"fw-bold text-gray-500 my-6\">\r\n <ul class=\"text-gray-400 fw-bold fs-6\">\r\n <li>Use the template to upload multiple stores at once.</li>\r\n <li>Download the template here -\r\n <a href=\"../../assets/files/storesUploadTemplate.xlsx\" download>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"template ms-2\">Download Template</span>\r\n </a>\r\n </li>\r\n <li>Add your data to the Template File</li>\r\n <li>Upload it below for processing</li>\r\n </ul>\r\n </div>\r\n <div class=\"d-flex flex-center flex-wrap mb-5\">\r\n <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" value=\"personal\"\r\n class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n (change)=\"onUpload($event)\"\r\n ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n <label for=\"kt_create_account_form_account_type_personal\"\r\n class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n class=\"fw-bold fs-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n <span class=\"text-white mx-2\">Add Multiple Stores</span></span>\r\n </label>\r\n <p class=\"text-gray-400 fw-bold my-3\">\r\n <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n </svg>\r\n </span>\r\n </p>\r\n <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" routerLink=\"/manage/stores/add-single-store\"\r\n class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n <label for=\"kt_account_team_size_select_1\"\r\n class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1.18015 3.80378L1.1269 3.88695C0.568863 4.874 1.16469 6.12143 2.2363 6.26452C2.33339 6.27639 2.42373 6.28267 2.512 6.28267C3.09015 6.28267 3.60132 6.03465 3.95759 5.64792L4.51093 5.0473L5.06238 5.64965C5.41432 6.03407 5.92433 6.28267 6.50639 6.28267C7.08583 6.28267 7.59877 6.03372 7.95039 5.64965L8.50358 5.04541L9.05676 5.64965C9.40839 6.03372 9.92133 6.28267 10.5008 6.28267C11.0802 6.28267 11.5932 6.03372 11.9448 5.64965L12.498 5.04541L13.0511 5.64965C13.4028 6.03372 13.9157 6.28267 14.4952 6.28267C14.5805 6.28267 14.6736 6.27638 14.77 6.26462C15.8652 6.1153 16.463 4.80103 15.8243 3.80428C15.8242 3.80423 15.8242 3.80417 15.8242 3.80411L14.066 1.0627L14.066 1.0627L14.0651 1.06123C14.0499 1.0374 14.0124 1.01184 13.9652 1.01184H3.03581C2.98866 1.01184 2.95117 1.0374 2.93597 1.06124L2.93535 1.0622L1.18015 3.80378ZM14.1516 8.73706V11.869V12.619H13.4016H3.59943H2.84943V11.869V8.73753C2.7392 8.74573 2.62768 8.74994 2.51507 8.74994C2.47276 8.74994 2.43074 8.74931 2.389 8.74809V11.869V13.8035C2.389 14.4469 2.9229 14.988 3.59943 14.988H13.4016C14.0781 14.988 14.612 14.4469 14.612 13.8035V11.869V8.74827C14.5722 8.74937 14.5322 8.74994 14.4921 8.74994C14.3777 8.74994 14.2641 8.74559 14.1516 8.73706Z\" stroke=\"#344054\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"fw-bold fs-4 mx-2\">\r\n Add Single\r\n Store</span></label>\r\n </div>\r\n \r\n </div>\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;text-align:center;font-family:Inter;font-size:20px!important;font-weight:600;line-height:30px}li{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:30px;list-style:decimal!important}::ng-deep .modal-content{border-radius:12px!important}.template{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}.or-condition{color:var(--Gray-700, #344054)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}\n"] }]
1601
1699
  }], ctorParameters: () => [{ type: StoresService }], propDecorators: { inputFile: [{
1602
1700
  type: ViewChild,
1603
1701
  args: ["inputFile"]