tango-app-ui-manage-stores 3.0.41-dev → 3.0.42-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 (6) hide show
  1. package/esm2022/lib/components/tango-manage-groups/tango-manage-groups.component.mjs +14 -4
  2. package/esm2022/lib/components/tango-manage-stores/tango-manage-stores.component.mjs +2 -2
  3. package/fesm2022/tango-app-ui-manage-stores.mjs +14 -4
  4. package/fesm2022/tango-app-ui-manage-stores.mjs.map +1 -1
  5. package/lib/components/tango-manage-groups/tango-manage-groups.component.d.ts +4 -2
  6. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-stores.mjs CHANGED
@@ -508,6 +508,7 @@ class TangoManageGroupsComponent {
508
508
  groupService;
509
509
  cd;
510
510
  gs;
511
+ pageInfo;
511
512
  dataEvent = new EventEmitter();
512
513
  Opendropdown = false;
513
514
  groups = [];
@@ -560,11 +561,12 @@ class TangoManageGroupsComponent {
560
561
  totalCount: 0,
561
562
  };
562
563
  paginationSizes = [10, 20, 30];
563
- constructor(modalService, groupService, cd, gs) {
564
+ constructor(modalService, groupService, cd, gs, pageInfo) {
564
565
  this.modalService = modalService;
565
566
  this.groupService = groupService;
566
567
  this.cd = cd;
567
568
  this.gs = gs;
569
+ this.pageInfo = pageInfo;
568
570
  }
569
571
  ngOnDestroy() {
570
572
  this.detach.next(true);
@@ -581,6 +583,14 @@ class TangoManageGroupsComponent {
581
583
  }
582
584
  });
583
585
  }
586
+ setPageData() {
587
+ this.pageInfo.setTitle("Groups");
588
+ this.pageInfo.setDescription("Create groups, map your team members and group them as you like");
589
+ this.pageInfo.setBreadcrumbs([
590
+ { title: "Manage", path: "/manage", isActive: false, isSeparator: false },
591
+ { title: "Manage", path: "/manage", isActive: false, isSeparator: true },
592
+ ]);
593
+ }
584
594
  getGroups() {
585
595
  this.loading = true;
586
596
  if (this.group_req.searchValue == "" && this.group_req.searchValue != undefined) {
@@ -755,13 +765,13 @@ class TangoManageGroupsComponent {
755
765
  }, (reason) => {
756
766
  });
757
767
  }
758
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, deps: [{ token: i1$2.NgbModal }, { token: GroupService }, { token: i0.ChangeDetectorRef }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
768
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, deps: [{ token: i1$2.NgbModal }, { token: GroupService }, { token: i0.ChangeDetectorRef }, { token: i1$1.GlobalStateService }, { token: i1$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
759
769
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 @if (groups.length) {\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()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" 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 @if ((gs.userAccess | async)?.manage_stores_isDelete) {\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 }\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 <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\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 <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !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 @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
760
770
  }
761
771
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, decorators: [{
762
772
  type: Component,
763
773
  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 @if (groups.length) {\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()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" 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 @if ((gs.userAccess | async)?.manage_stores_isDelete) {\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 }\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 <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\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 <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !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 @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\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"] }]
764
- }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i1$1.GlobalStateService }], propDecorators: { dataEvent: [{
774
+ }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i1$1.GlobalStateService }, { type: i1$1.PageInfoService }], propDecorators: { dataEvent: [{
765
775
  type: Output
766
776
  }] } });
767
777
 
@@ -1476,7 +1486,7 @@ class TangoManageStoresComponent {
1476
1486
  }
1477
1487
  setPageData() {
1478
1488
  this.pageInfo.setTitle("Stores");
1479
- this.pageInfo.setDescription("To optimize and improve existing algorithm");
1489
+ this.pageInfo.setDescription("List of all stores in a consolidated view along with their status.");
1480
1490
  this.pageInfo.setBreadcrumbs([
1481
1491
  { title: "Manage", path: "/manage", isActive: false, isSeparator: false },
1482
1492
  { title: "Manage", path: "/manage", isActive: false, isSeparator: true },