tango-app-ui-manage-stores 3.0.27-dev → 3.0.28-dev

package/fesm2022/tango-app-ui-manage-stores.mjs

@@ -545,6 +545,12 @@ class TangoManageGroupsComponent {
     searchValue = "";
     $headerFilters;
     detach = new Subject();
+    pagination = {
+        offset: 1,
+        limit: 10,
+        totalCount: 0,
+    };
+    paginationSizes = [10, 20, 30];
     constructor(modalService, groupService, cd, gs) {
         this.modalService = modalService;
         this.groupService = groupService;
@@ -576,12 +582,30 @@ class TangoManageGroupsComponent {
                 if (res && res.code == 200) {
                     this.groupData = res.data;
                     this.groups = res.data.result;
+                    this.pagination = {
+                        offset: res.data?.offset
+                            ? res?.data.offset
+                            : this.pagination.offset,
+                        limit: res.data?.limit ? res?.data.limit : this.pagination.limit,
+                        totalCount: res.data.count,
+                    };
+                    if (res.data.count < 10) {
+                        this.paginationSizes = [res.data.count];
+                    }
+                    else {
+                        this.paginationSizes = [10, 20, 30];
+                    }
                     this.loading = false;
                     this.cd.detectChanges();
                 }
                 else {
                     this.groups = [];
                     this.loading = false;
+                    this.pagination = {
+                        offset: 1,
+                        limit: 10,
+                        totalCount: 0,
+                    };
                     this.cd.detectChanges();
                 }
                 this.loading = false;
@@ -590,6 +614,11 @@ class TangoManageGroupsComponent {
             error: () => {
                 this.groups = [];
                 this.loading = false;
+                this.pagination = {
+                    offset: 1,
+                    limit: 10,
+                    totalCount: 0,
+                };
                 this.cd.detectChanges();
             },
             complete: () => {
@@ -604,9 +633,29 @@ class TangoManageGroupsComponent {
         };
         this.getGroups();
     }
+    onPageChange(pageOffset) {
+        this.group_req.offset = Number(pageOffset);
+        this.pagination.offset = Number(pageOffset);
+        this.getGroups();
+    }
+    onPageSizeChange(pageSize) {
+        this.group_req.limit = Number(pageSize);
+        this.pagination.limit = Number(pageSize);
+        this.group_req.offset = 1;
+        this.pagination.offset = 1;
+        this.getGroups();
+    }
     // isLinkActive(link: string): boolean {
     //   return this.router.isActive(link, true);
     // }
+    paginationSize() {
+        if (this.pagination?.totalCount < 10) {
+            return this.pagination.totalCount;
+        }
+        else {
+            return this.pagination.limit;
+        }
+    }
     groupsDetials(val) {
         const dataToGroup = "Group Details Value";
         this.dataEvent.emit(dataToGroup);
@@ -698,11 +747,11 @@ class TangoManageGroupsComponent {
         });
     }
     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 });
-    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    </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: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, decorators: [{
             type: Component,
-            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    </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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i1$1.GlobalStateService }], propDecorators: { dataEvent: [{
                 type: Output
             }] } });
@@ -1518,16 +1567,16 @@ class TangoManageStoresComponent {
                     this.$headerFilters = data;
                     this.getCountries();
                     this.storeList_req = {
-                        fromDate: this.$headerFilters.date?.startDate
-                            ? this.$headerFilters.date.startDate
-                            : new Date()
-                                .toISOString()
-                                .split("T")[0],
-                        toDate: this.$headerFilters.date?.endDate
-                            ? this.$headerFilters.date.endDate
-                            : new Date()
-                                .toISOString()
-                                .split("T")[0],
+                        // fromDate: this.$headerFilters.date?.startDate
+                        //   ? this.$headerFilters.date.startDate
+                        //   : new Date()
+                        //     .toISOString()
+                        //     .split("T")[0],
+                        // toDate: this.$headerFilters.date?.endDate
+                        //   ? this.$headerFilters.date.endDate
+                        //   : new Date()
+                        //     .toISOString()
+                        //     .split("T")[0],
                         clientId: [this.$headerFilters.client],
                         offset: 1,
                         limit: 10,