npm - tango-app-ui-manage-stores - Versions diffs - 3.0.36-dev → 3.0.38-dev - Mend

tango-app-ui-manage-stores 3.0.36-dev → 3.0.38-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 (7) hide show

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

@@ -774,7 +774,7 @@ class FiltersComponent {
     showdropdown;
     selectedValues = [];
     selectedValuesArray = [];
-    searchValue;
+    searchValues = [];
     backUpArray = [];
     noFilter = false;
     responseArray = [];
@@ -921,6 +921,7 @@ class FiltersComponent {
                         });
                     }
                     this.dataObject[this.stateIndex].Issues = extractedData;
+                    this.backUpArray[this.stateIndex].Issues = extractedData;
                     this.selectedValuesArray[this.stateIndex] = [];
                     this.getCities(countryCode, extractedData[0].id);
                 }
@@ -950,6 +951,7 @@ class FiltersComponent {
                         });
                     }
                     this.dataObject[this.cityIndex].Issues = extractedData;
+                    this.backUpArray[this.cityIndex].Issues = extractedData;
                     this.selectedValuesArray[this.cityIndex] = [];
                 }
                 else {
@@ -966,6 +968,7 @@ class FiltersComponent {
     }
     Reset() {
         this.selectedValuesArray = [];
+        this.searchValues = [];
         this.responseArray.forEach((item, index) => {
             this.responseArray[index].selected = [];
         });
@@ -975,6 +978,7 @@ class FiltersComponent {
         this.backUpArray.forEach((item, index) => {
             this.backUpArray[index].selected = [];
         });
+        this.dataObject = JSON.parse(JSON.stringify(this.backUpArray));
     }
     searchData(event, i) {
         const filteredIssues = this.backUpArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.text));
@@ -1010,11 +1014,11 @@ class FiltersComponent {
         this.AppliedFilters.emit(this.responseArray);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: StoresService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                @if(item.multiDropdown) {\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckboxs('Select All', i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckboxs(issue.text,i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n                    </div>\r\n                } @else {\r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" > No filters available</span>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                @if(item.multiDropdown) {\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckboxs('Select All', i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValues[i]\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckboxs(issue.text,i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n                    </div>\r\n                } @else {\r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValues[i]\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" > No filters available</span>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-filters-custom", template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                @if(item.multiDropdown) {\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckboxs('Select All', i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckboxs(issue.text,i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n                    </div>\r\n                } @else {\r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" > No filters available</span>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+            args: [{ selector: "lib-filters-custom", template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                @if(item.multiDropdown) {\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckboxs('Select All', i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValues[i]\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckboxs(issue.text,i)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n                    </div>\r\n                } @else {\r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"searchValues[i]\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index;\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                         (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" > No filters available</span>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: StoresService }, { type: i0.ChangeDetectorRef }], propDecorators: { dataObject: [{
                 type: Input
             }], AppliedFilters: [{
@@ -1443,6 +1447,7 @@ class TangoManageStoresComponent {
     searchInput = new FormControl("");
     detach = new Subject();
     user;
+    refreshFilter = false;
     constructor(pageInfo, storesService, changeDetector, excelService, gs, router, ts) {
         this.pageInfo = pageInfo;
         this.storesService = storesService;
@@ -1657,6 +1662,7 @@ class TangoManageStoresComponent {
                         });
                     }
                     this.filterOptions[countryIndex].Issues = extractedData;
+                    this.refreshFilter = true;
                 }
                 else {
                     this.filterOptions[countryIndex].Issues = [];
@@ -1835,11 +1841,11 @@ class TangoManageStoresComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, deps: [{ token: i1$1.PageInfoService }, { token: StoresService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i1$1.GlobalStateService }, { token: i4.Router }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul\r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n                    <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n                        Stores\r\n                    </a>\r\n                </li>\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n                    <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n                        class=\"nav-link me-6\">Groups\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header border-0 pt-3\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"card-label mb-2\">Stores</span>\r\n                <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n                    stores</span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n                                placeholder=\"Search\" autocomplete=\"off\" />\r\n                            <!-- filter Start -->\r\n                                <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n                            <!-- filter End -->\r\n                                @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n                                    <button type=\"button\" (click)=\"exportXLSX()\"\r\n                                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <span class=\"ms-2\">Export</span>\r\n                                    </button>\r\n                                }\r\n                                @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                    <button routerLink=\"/manage/stores/addition-method\" 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\">Add Store</span>\r\n                                    </button>\r\n                                }\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            @if(!loading && !noData) {\r\n            <ng-container>\r\n                <div class=\"table-responsive\">\r\n                    <table class=\"table bottom-border text-nowrap\">\r\n                        <thead class=\"cursor-pointer\">\r\n                            <tr>\r\n                                <!-- <th>\r\n                                        <form class=\"form\">\r\n                                            <div class=\"form-group\">\r\n                                                <div class=\"checkbox-inline\">\r\n                                                    <label class=\"checkbox\">\r\n                                                        <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                        </form>\r\n                                    </th> -->\r\n                                <th (click)=\"onSort('storeId')\">Store Info\r\n                                    <span *ngIf=\"colDirection('storeId')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('storeId')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('city')\">Location\r\n                                    <span *ngIf=\"colDirection('city')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('city')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <!-- <th (click)=\"onSort('downTime')\">Downtime <span>\r\n                                        <span *ngIf=\"colDirection('downTime')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('downTime')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th> -->\r\n                                <th (click)=\"onSort('status')\">Status <span>\r\n                                        <span *ngIf=\"colDirection('status')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('status')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th>Actions</th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n                                <tr>\r\n                                    <!-- <td>\r\n                                            <form class=\"form\">\r\n                                                <div class=\"form-group\">\r\n                                                    <div class=\"checkbox-inline\">\r\n                                                        <label class=\"checkbox\">\r\n                                                            <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                        </label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </form>\r\n                                        </td> -->\r\n                                    <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"txt-light-primary\">\r\n                                                {{store?.storeName}}\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"table-sub\">ID : {{store?.storeId}}\r\n                                            <span class=\"my-1 mx-1\">\r\n                                                <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n                                                </svg>\r\n                                                {{store?.progress ? store?.progress : 20}}%\r\n                                                <div class=\"h-5px w-100 bg-light mt-2\">\r\n                                                    <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n                                                        [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n                                                        aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n                                                </div>\r\n                                            </span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"w-200px\">\r\n                                        @if (store?.city) {\r\n                                        <div class=\"table-sub\">{{store?.city}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                        @if (store?.country && store?.state) {\r\n                                        <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label badge-light-primary text-symbol\">\r\n                                                    <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                        {{store?.spocEmail.slice(0,2) | uppercase }}\r\n                                                    </span>\r\n                                                </span>\r\n                                            </div>\r\n                                            <div class=\"ms-2\">\r\n                                                <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n                                                <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </td>\r\n                                    <!-- <td class=\"fw-semibold\">{{store?.downTime}}</td> -->\r\n                                    <td>\r\n                                        @if(store?.status === 'onboareded') {\r\n                                            <span class=\"blue-badge\">Onboarded</span>\r\n                                        } @else if (store.status==='installationfailed') {\r\n                                            <span class=\"yellow-badge\">Installation Failed</span>\r\n                                        } @else if(store.status==='paired') {\r\n                                            <span class=\"blue-badge\">Paired</span>\r\n                                        } @else if(store.status==='live') {\r\n                                            <span class=\"green-badge\">Live</span>\r\n                                        }@else{\r\n                                            <span class=\"blue-badge\">{{store?.status | titlecase}}</span>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n                                        <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n                                    </td>\r\n                                    <td>                                        \r\n                                        <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>View</span>\r\n                                        </button> \r\n                                        <!-- @if (store.status!=='Live') {\r\n                                            <button type=\"button\" disabled=\"true\"\r\n                                                class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                                <span>View</span>\r\n                                            </button>\r\n                                        } -->\r\n                                        @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                        <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Pair</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n                                            (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Config</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>infra</span>\r\n                                        </button>\r\n                                      \r\n                                        <span class=\"dropdown1\">\r\n                                            <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                                                <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <path\r\n                                                        d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </button>\r\n                                            <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\r\n                                                <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n                                                        Store</button></li>\r\n                                                <!-- @if(store?.storeStatus !== 'active') { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'active'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'deactive')\" type=\"button\">Deactivate</button></li>\r\n                                                <!-- } @else { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'deactive'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'active')\" type=\"button\">Activate</button></li>\r\n                                                <!-- } -->\r\n                                            </ul>\r\n                                        </span>\r\n                                        }\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-container>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                \r\n            </ng-container>\r\n            <lib-pagination class=\"mt-20\" [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            } @else if (loading && !noData) {\r\n                <ng-container>\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            } @else if (noData && !loading) {\r\n                <ng-container>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n    <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n    <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n    <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}.green-badge{color:#027a48;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#ecfdf3;padding:2px 8px}.yellow-badge{color:#b54708;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fffaeb;padding:2px 8px}.blue-badge{color:#009bf3;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#eaf8ff;padding:2px 8px}.red-badge{color:#b42318;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fef3f2;padding:2px 8px}.dropdown{position:relative;z-index:1000}.dropdown-menu{z-index:1001}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul\r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n                    <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n                        Stores\r\n                    </a>\r\n                </li>\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n                    <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n                        class=\"nav-link me-6\">Groups\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header border-0 pt-3\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"card-label mb-2\">Stores</span>\r\n                <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n                    stores</span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n                                placeholder=\"Search\" autocomplete=\"off\" />\r\n                            <!-- filter Start -->\r\n                                <!-- <lib-filters-custom *ngIf=\"refreshFilter\" [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom> -->\r\n                            <!-- filter End -->\r\n                                @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n                                    <button type=\"button\" (click)=\"exportXLSX()\"\r\n                                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <span class=\"ms-2\">Export</span>\r\n                                    </button>\r\n                                }\r\n                                @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                    <button routerLink=\"/manage/stores/addition-method\" 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\">Add Store</span>\r\n                                    </button>\r\n                                }\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            @if(!loading && !noData) {\r\n            <ng-container>\r\n                <div class=\"table-responsive\">\r\n                    <table class=\"table bottom-border text-nowrap\">\r\n                        <thead class=\"cursor-pointer\">\r\n                            <tr>\r\n                                <!-- <th>\r\n                                        <form class=\"form\">\r\n                                            <div class=\"form-group\">\r\n                                                <div class=\"checkbox-inline\">\r\n                                                    <label class=\"checkbox\">\r\n                                                        <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                        </form>\r\n                                    </th> -->\r\n                                <th (click)=\"onSort('storeId')\">Store Info\r\n                                    <span *ngIf=\"colDirection('storeId')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('storeId')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('city')\">Location\r\n                                    <span *ngIf=\"colDirection('city')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('city')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <!-- <th (click)=\"onSort('downTime')\">Downtime <span>\r\n                                        <span *ngIf=\"colDirection('downTime')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('downTime')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th> -->\r\n                                <th (click)=\"onSort('status')\">Status <span>\r\n                                        <span *ngIf=\"colDirection('status')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('status')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th>Actions</th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n                                <tr>\r\n                                    <!-- <td>\r\n                                            <form class=\"form\">\r\n                                                <div class=\"form-group\">\r\n                                                    <div class=\"checkbox-inline\">\r\n                                                        <label class=\"checkbox\">\r\n                                                            <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                        </label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </form>\r\n                                        </td> -->\r\n                                    <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"txt-light-primary\">\r\n                                                {{store?.storeName}}\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"table-sub\">ID : {{store?.storeId}}\r\n                                            <span class=\"my-1 mx-1\">\r\n                                                <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n                                                </svg>\r\n                                                {{store?.progress ? store?.progress : 20}}%\r\n                                                <div class=\"h-5px w-100 bg-light mt-2\">\r\n                                                    <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n                                                        [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n                                                        aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n                                                </div>\r\n                                            </span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"w-200px\">\r\n                                        @if (store?.city) {\r\n                                        <div class=\"table-sub\">{{store?.city}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                        @if (store?.country && store?.state) {\r\n                                        <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label badge-light-primary text-symbol\">\r\n                                                    <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                        {{store?.spocEmail.slice(0,2) | uppercase }}\r\n                                                    </span>\r\n                                                </span>\r\n                                            </div>\r\n                                            <div class=\"ms-2\">\r\n                                                <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n                                                <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </td>\r\n                                    <!-- <td class=\"fw-semibold\">{{store?.downTime}}</td> -->\r\n                                    <td>\r\n                                        @if(store?.status === 'onboareded') {\r\n                                            <span class=\"blue-badge\">Onboarded</span>\r\n                                        } @else if (store.status==='installationfailed') {\r\n                                            <span class=\"yellow-badge\">Installation Failed</span>\r\n                                        } @else if(store.status==='paired') {\r\n                                            <span class=\"blue-badge\">Paired</span>\r\n                                        } @else if(store.status==='live') {\r\n                                            <span class=\"green-badge\">Live</span>\r\n                                        }@else{\r\n                                            <span class=\"blue-badge\">{{store?.status | titlecase}}</span>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n                                        <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n                                    </td>\r\n                                    <td>                                        \r\n                                        <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>View</span>\r\n                                        </button> \r\n                                        <!-- @if (store.status!=='Live') {\r\n                                            <button type=\"button\" disabled=\"true\"\r\n                                                class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                                <span>View</span>\r\n                                            </button>\r\n                                        } -->\r\n                                        @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                        <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Pair</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n                                            (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Config</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>infra</span>\r\n                                        </button>\r\n                                      \r\n                                        <span class=\"dropdown1\">\r\n                                            <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                                                <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <path\r\n                                                        d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </button>\r\n                                            <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\r\n                                                <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n                                                        Store</button></li>\r\n                                                <!-- @if(store?.storeStatus !== 'active') { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'active'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'deactive')\" type=\"button\">Deactivate</button></li>\r\n                                                <!-- } @else { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'deactive'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'active')\" type=\"button\">Activate</button></li>\r\n                                                <!-- } -->\r\n                                            </ul>\r\n                                        </span>\r\n                                        }\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-container>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                \r\n            </ng-container>\r\n            <lib-pagination class=\"mt-20\" [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            } @else if (loading && !noData) {\r\n                <ng-container>\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            } @else if (noData && !loading) {\r\n                <ng-container>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n    <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n    <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n    <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}.green-badge{color:#027a48;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#ecfdf3;padding:2px 8px}.yellow-badge{color:#b54708;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fffaeb;padding:2px 8px}.blue-badge{color:#009bf3;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#eaf8ff;padding:2px 8px}.red-badge{color:#b42318;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fef3f2;padding:2px 8px}.dropdown{position:relative;z-index:1000}.dropdown-menu{z-index:1001}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul\r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n                    <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n                        Stores\r\n                    </a>\r\n                </li>\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n                    <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n                        class=\"nav-link me-6\">Groups\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header border-0 pt-3\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"card-label mb-2\">Stores</span>\r\n                <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n                    stores</span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n                                placeholder=\"Search\" autocomplete=\"off\" />\r\n                            <!-- filter Start -->\r\n                                <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n                            <!-- filter End -->\r\n                                @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n                                    <button type=\"button\" (click)=\"exportXLSX()\"\r\n                                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <span class=\"ms-2\">Export</span>\r\n                                    </button>\r\n                                }\r\n                                @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                    <button routerLink=\"/manage/stores/addition-method\" 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\">Add Store</span>\r\n                                    </button>\r\n                                }\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            @if(!loading && !noData) {\r\n            <ng-container>\r\n                <div class=\"table-responsive\">\r\n                    <table class=\"table bottom-border text-nowrap\">\r\n                        <thead class=\"cursor-pointer\">\r\n                            <tr>\r\n                                <!-- <th>\r\n                                        <form class=\"form\">\r\n                                            <div class=\"form-group\">\r\n                                                <div class=\"checkbox-inline\">\r\n                                                    <label class=\"checkbox\">\r\n                                                        <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                        </form>\r\n                                    </th> -->\r\n                                <th (click)=\"onSort('storeId')\">Store Info\r\n                                    <span *ngIf=\"colDirection('storeId')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('storeId')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('city')\">Location\r\n                                    <span *ngIf=\"colDirection('city')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('city')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <!-- <th (click)=\"onSort('downTime')\">Downtime <span>\r\n                                        <span *ngIf=\"colDirection('downTime')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('downTime')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th> -->\r\n                                <th (click)=\"onSort('status')\">Status <span>\r\n                                        <span *ngIf=\"colDirection('status')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('status')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th>Actions</th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n                                <tr>\r\n                                    <!-- <td>\r\n                                            <form class=\"form\">\r\n                                                <div class=\"form-group\">\r\n                                                    <div class=\"checkbox-inline\">\r\n                                                        <label class=\"checkbox\">\r\n                                                            <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                        </label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </form>\r\n                                        </td> -->\r\n                                    <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"txt-light-primary\">\r\n                                                {{store?.storeName}}\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"table-sub\">ID : {{store?.storeId}}\r\n                                            <span class=\"my-1 mx-1\">\r\n                                                <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n                                                </svg>\r\n                                                {{store?.progress ? store?.progress : 20}}%\r\n                                                <div class=\"h-5px w-100 bg-light mt-2\">\r\n                                                    <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n                                                        [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n                                                        aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n                                                </div>\r\n                                            </span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"w-200px\">\r\n                                        @if (store?.city) {\r\n                                        <div class=\"table-sub\">{{store?.city}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                        @if (store?.country && store?.state) {\r\n                                        <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label badge-light-primary text-symbol\">\r\n                                                    <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                        {{store?.spocEmail.slice(0,2) | uppercase }}\r\n                                                    </span>\r\n                                                </span>\r\n                                            </div>\r\n                                            <div class=\"ms-2\">\r\n                                                <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n                                                <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </td>\r\n                                    <!-- <td class=\"fw-semibold\">{{store?.downTime}}</td> -->\r\n                                    <td>\r\n                                        @if(store?.status === 'onboareded') {\r\n                                            <span class=\"blue-badge\">Onboarded</span>\r\n                                        } @else if (store.status==='installationfailed') {\r\n                                            <span class=\"yellow-badge\">Installation Failed</span>\r\n                                        } @else if(store.status==='paired') {\r\n                                            <span class=\"blue-badge\">Paired</span>\r\n                                        } @else if(store.status==='live') {\r\n                                            <span class=\"green-badge\">Live</span>\r\n                                        }@else{\r\n                                            <span class=\"blue-badge\">{{store?.status | titlecase}}</span>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n                                        <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n                                    </td>\r\n                                    <td>                                        \r\n                                        <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>View</span>\r\n                                        </button> \r\n                                        <!-- @if (store.status!=='Live') {\r\n                                            <button type=\"button\" disabled=\"true\"\r\n                                                class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                                <span>View</span>\r\n                                            </button>\r\n                                        } -->\r\n                                        @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                        <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Pair</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n                                            (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Config</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>infra</span>\r\n                                        </button>\r\n                                      \r\n                                        <span class=\"dropdown1\">\r\n                                            <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                                                <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <path\r\n                                                        d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </button>\r\n                                            <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\r\n                                                <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n                                                        Store</button></li>\r\n                                                <!-- @if(store?.storeStatus !== 'active') { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'active'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'deactive')\" type=\"button\">Deactivate</button></li>\r\n                                                <!-- } @else { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'deactive'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'active')\" type=\"button\">Activate</button></li>\r\n                                                <!-- } -->\r\n                                            </ul>\r\n                                        </span>\r\n                                        }\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-container>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                \r\n            </ng-container>\r\n            <lib-pagination class=\"mt-20\" [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            } @else if (loading && !noData) {\r\n                <ng-container>\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            } @else if (noData && !loading) {\r\n                <ng-container>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n    <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n    <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n    <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}.green-badge{color:#027a48;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#ecfdf3;padding:2px 8px}.yellow-badge{color:#b54708;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fffaeb;padding:2px 8px}.blue-badge{color:#009bf3;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#eaf8ff;padding:2px 8px}.red-badge{color:#b42318;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fef3f2;padding:2px 8px}.dropdown{position:relative;z-index:1000}.dropdown-menu{z-index:1001}\n"] }]
+            args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul\r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n                    <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n                        Stores\r\n                    </a>\r\n                </li>\r\n                <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n                    <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n                        class=\"nav-link me-6\">Groups\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header border-0 pt-3\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n                <span class=\"card-label mb-2\">Stores</span>\r\n                <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n                    stores</span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n                                placeholder=\"Search\" autocomplete=\"off\" />\r\n                            <!-- filter Start -->\r\n                                <!-- <lib-filters-custom *ngIf=\"refreshFilter\" [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom> -->\r\n                            <!-- filter End -->\r\n                                @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n                                    <button type=\"button\" (click)=\"exportXLSX()\"\r\n                                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <span class=\"ms-2\">Export</span>\r\n                                    </button>\r\n                                }\r\n                                @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                    <button routerLink=\"/manage/stores/addition-method\" 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\">Add Store</span>\r\n                                    </button>\r\n                                }\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            @if(!loading && !noData) {\r\n            <ng-container>\r\n                <div class=\"table-responsive\">\r\n                    <table class=\"table bottom-border text-nowrap\">\r\n                        <thead class=\"cursor-pointer\">\r\n                            <tr>\r\n                                <!-- <th>\r\n                                        <form class=\"form\">\r\n                                            <div class=\"form-group\">\r\n                                                <div class=\"checkbox-inline\">\r\n                                                    <label class=\"checkbox\">\r\n                                                        <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                        </form>\r\n                                    </th> -->\r\n                                <th (click)=\"onSort('storeId')\">Store Info\r\n                                    <span *ngIf=\"colDirection('storeId')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('storeId')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('city')\">Location\r\n                                    <span *ngIf=\"colDirection('city')===-1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                    <span *ngIf=\"colDirection('city')===1\">\r\n                                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path\r\n                                                d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span>\r\n                                </th>\r\n                                <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('spocContact')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <!-- <th (click)=\"onSort('downTime')\">Downtime <span>\r\n                                        <span *ngIf=\"colDirection('downTime')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('downTime')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th> -->\r\n                                <th (click)=\"onSort('status')\">Status <span>\r\n                                        <span *ngIf=\"colDirection('status')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('status')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                        <span *ngIf=\"colDirection('statusDetail')===1\">\r\n                                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n                                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <path\r\n                                                    d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                        </span>\r\n                                    </span> </th>\r\n                                <th>Actions</th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n                                <tr>\r\n                                    <!-- <td>\r\n                                            <form class=\"form\">\r\n                                                <div class=\"form-group\">\r\n                                                    <div class=\"checkbox-inline\">\r\n                                                        <label class=\"checkbox\">\r\n                                                            <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n                                                        </label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </form>\r\n                                        </td> -->\r\n                                    <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"txt-light-primary\">\r\n                                                {{store?.storeName}}\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"table-sub\">ID : {{store?.storeId}}\r\n                                            <span class=\"my-1 mx-1\">\r\n                                                <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n                                                </svg>\r\n                                                {{store?.progress ? store?.progress : 20}}%\r\n                                                <div class=\"h-5px w-100 bg-light mt-2\">\r\n                                                    <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n                                                        [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n                                                        aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n                                                </div>\r\n                                            </span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"w-200px\">\r\n                                        @if (store?.city) {\r\n                                        <div class=\"table-sub\">{{store?.city}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                        @if (store?.country && store?.state) {\r\n                                        <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n                                        } @else {\r\n                                        <div class=\"table-sub\">NA</div>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label badge-light-primary text-symbol\">\r\n                                                    <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                        {{store?.spocEmail.slice(0,2) | uppercase }}\r\n                                                    </span>\r\n                                                </span>\r\n                                            </div>\r\n                                            <div class=\"ms-2\">\r\n                                                <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n                                                <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </td>\r\n                                    <!-- <td class=\"fw-semibold\">{{store?.downTime}}</td> -->\r\n                                    <td>\r\n                                        @if(store?.status === 'onboareded') {\r\n                                            <span class=\"blue-badge\">Onboarded</span>\r\n                                        } @else if (store.status==='installationfailed') {\r\n                                            <span class=\"yellow-badge\">Installation Failed</span>\r\n                                        } @else if(store.status==='paired') {\r\n                                            <span class=\"blue-badge\">Paired</span>\r\n                                        } @else if(store.status==='live') {\r\n                                            <span class=\"green-badge\">Live</span>\r\n                                        }@else{\r\n                                            <span class=\"blue-badge\">{{store?.status | titlecase}}</span>\r\n                                        }\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n                                        <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n                                    </td>\r\n                                    <td>                                        \r\n                                        <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>View</span>\r\n                                        </button> \r\n                                        <!-- @if (store.status!=='Live') {\r\n                                            <button type=\"button\" disabled=\"true\"\r\n                                                class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                                <span>View</span>\r\n                                            </button>\r\n                                        } -->\r\n                                        @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n                                        <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Pair</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n                                            (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>Config</span>\r\n                                        </button>\r\n                                        <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n                                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                                            <span>infra</span>\r\n                                        </button>\r\n                                      \r\n                                        <span class=\"dropdown1\">\r\n                                            <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                                                <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                    <path\r\n                                                        d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    <path\r\n                                                        d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n                                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </button>\r\n                                            <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\r\n                                                <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n                                                        Store</button></li>\r\n                                                <!-- @if(store?.storeStatus !== 'active') { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'active'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'deactive')\" type=\"button\">Deactivate</button></li>\r\n                                                <!-- } @else { -->\r\n                                                    <li *ngIf =\"store?.storeStatus === 'deactive'\"><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store,'active')\" type=\"button\">Activate</button></li>\r\n                                                <!-- } -->\r\n                                            </ul>\r\n                                        </span>\r\n                                        }\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-container>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                \r\n            </ng-container>\r\n            <lib-pagination class=\"mt-20\" [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            } @else if (loading && !noData) {\r\n                <ng-container>\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            } @else if (noData && !loading) {\r\n                <ng-container>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n    <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n    <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n    <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}.green-badge{color:#027a48;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#ecfdf3;padding:2px 8px}.yellow-badge{color:#b54708;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fffaeb;padding:2px 8px}.blue-badge{color:#009bf3;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#eaf8ff;padding:2px 8px}.red-badge{color:#b42318;font-size:12px;font-weight:500;line-height:18px;border-radius:16px;background:#fef3f2;padding:2px 8px}.dropdown{position:relative;z-index:1000}.dropdown-menu{z-index:1001}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.PageInfoService }, { type: StoresService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i1$1.GlobalStateService }, { type: i4.Router }, { type: i3.ToastService }] });
 class AddStoresComponent {