npm - tango-app-ui-manage-users - Versions diffs - 3.7.0-alpha.5 → 3.7.0-alpha.7 - Mend

tango-app-ui-manage-users 3.7.0-alpha.5 → 3.7.0-alpha.7

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 (8) hide show

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

@@ -912,15 +912,15 @@ class AddUsersComponent {
             this.ts.getErrorToast("Special characters are not allowed.");
         }
     }
-    preventDefault(event) {
+    preventClose(event) {
         event.preventDefault();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUsersComponent, deps: [{ token: ManageUsersService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbActiveModal }, { token: i3.FormBuilder }, { token: UserService }, { token: i4.ToastService }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddUsersComponent, selector: "lib-add-users", inputs: { type: "type", user: "user", userType: "userType", data: "data" }, ngImport: i0, template: "<div  class=\"card pt-0 pb-3 scroll\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5 d-flex\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n            </div>\r\n                \r\n        </div>\r\n        <div class=\"row w-100\">\r\n            <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n                    User</a>\r\n                <div class=\"sub-title\">Please add your user details</div>\r\n            </div>\r\n            <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n                <div class=\"sub-title\">Please Edit your user details</div>\r\n            </div> -->\r\n            <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">View your user details</div>\r\n            </div>\r\n            <ng-container *ngIf=\"operationType!=='view'\">\r\n            <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view'  && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n                <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_3833_85908)\">\r\n                            <path\r\n                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3833_85908\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></button>\r\n            </div>\r\n          </ng-container>\r\n            <div *ngIf=\"type==='edit'  && type !=='view'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">Edit your user details</div>\r\n            </div>\r\n            <div class=\"w-100 h-0px scroll\">\r\n                <div class=\"mt-5\" *ngIf=\"userForm\">\r\n                    <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keypress)=\"preventDefault($event)\" class=\"\">\r\n                        <div class=\"row px-0 me-3\">\r\n                            <!-- User Name Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n                              <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Email Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n                              <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Contact Number Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n                              <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                                  <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n                                    <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n                                      {{country.name}} ({{country.phonecode}})\r\n                                    </option>\r\n                                  </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                  <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n                                    id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n                                  <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Role Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n                              <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n                                <option value=\"admin\">Admin</option>\r\n                                <option value=\"user\">User</option>\r\n                              </select>\r\n                              <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Add to Team Field -->\r\n                            <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n                              <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n                              <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n                                           (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n                            </div>\r\n                          </div>\r\n                          \r\n                        <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n                            <h3 class=\"teams-title\"  *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n                            <ng-container *ngIf=\"getPermissions().length\">\r\n                                <ng-container formArrayName=\"rolespermission\">\r\n                                  <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"table-responsive my-2 me-3\">\r\n                                      <div class=\"row w-100\">\r\n                                        <div class=\"title-header mt-4 ms-2\">\r\n                                          {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n                                        <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <table class=\"w-100\">\r\n                                            <tbody>\r\n                                              <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n                                                <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                              </tr>\r\n                                            </tbody>\r\n                                          </table>\r\n                                        </ng-container>\r\n                                        <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n                                          <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                            <div class=\"d-inline-flex mt-3\">\r\n                                              <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n                                              <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n                                                {{ camelCaseToText(modules.get('name')?.value) }}\r\n                                              </label>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </ng-container>\r\n                              </ng-container>\r\n                            \r\n                        </div>\r\n                        <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n                            <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                            <button  class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n                                (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddUsersComponent, selector: "lib-add-users", inputs: { type: "type", user: "user", userType: "userType", data: "data" }, ngImport: i0, template: "<div  class=\"card pt-0 pb-3 scroll\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5 d-flex\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n            </div>\r\n                \r\n        </div>\r\n        <div class=\"row w-100\">\r\n            <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n                    User</a>\r\n                <div class=\"sub-title\">Please add your user details</div>\r\n            </div>\r\n            <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n                <div class=\"sub-title\">Please Edit your user details</div>\r\n            </div> -->\r\n            <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">View your user details</div>\r\n            </div>\r\n            <ng-container *ngIf=\"operationType!=='view'\">\r\n            <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view'  && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n                <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_3833_85908)\">\r\n                            <path\r\n                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3833_85908\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></button>\r\n            </div>\r\n          </ng-container>\r\n            <div *ngIf=\"type==='edit'  && type !=='view'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">Edit your user details</div>\r\n            </div>\r\n            <div class=\"w-100 h-0px scroll\">\r\n                <div class=\"mt-5\" *ngIf=\"userForm\">\r\n                    <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keydown.enter)=\"preventClose($event)\" class=\"\">\r\n                        <div class=\"row px-0 me-3\">\r\n                            <!-- User Name Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n                              <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Email Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n                              <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Contact Number Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n                              <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                                  <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n                                    <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n                                      {{country.name}} ({{country.phonecode}})\r\n                                    </option>\r\n                                  </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                  <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n                                    id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n                                  <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Role Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n                              <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n                                <option value=\"admin\">Admin</option>\r\n                                <option value=\"user\">User</option>\r\n                              </select>\r\n                              <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Add to Team Field -->\r\n                            <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n                              <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n                              <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n                                           (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n                            </div>\r\n                          </div>\r\n                          \r\n                        <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n                            <h3 class=\"teams-title\"  *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n                            <ng-container *ngIf=\"getPermissions().length\">\r\n                                <ng-container formArrayName=\"rolespermission\">\r\n                                  <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"table-responsive my-2 me-3\">\r\n                                      <div class=\"row w-100\">\r\n                                        <div class=\"title-header mt-4 ms-2\">\r\n                                          {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n                                        <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <table class=\"w-100\">\r\n                                            <tbody>\r\n                                              <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n                                                <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                              </tr>\r\n                                            </tbody>\r\n                                          </table>\r\n                                        </ng-container>\r\n                                        <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n                                          <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                            <div class=\"d-inline-flex mt-3\">\r\n                                              <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n                                              <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n                                                {{ camelCaseToText(modules.get('name')?.value) }}\r\n                                              </label>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </ng-container>\r\n                              </ng-container>\r\n                            \r\n                        </div>\r\n                        <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n                            <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                            <button  class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n                                (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected", "deselected", "deselectedAll"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-users', template: "<div  class=\"card pt-0 pb-3 scroll\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5 d-flex\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n            </div>\r\n                \r\n        </div>\r\n        <div class=\"row w-100\">\r\n            <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n                    User</a>\r\n                <div class=\"sub-title\">Please add your user details</div>\r\n            </div>\r\n            <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n                <div class=\"sub-title\">Please Edit your user details</div>\r\n            </div> -->\r\n            <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">View your user details</div>\r\n            </div>\r\n            <ng-container *ngIf=\"operationType!=='view'\">\r\n            <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view'  && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n                <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_3833_85908)\">\r\n                            <path\r\n                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3833_85908\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></button>\r\n            </div>\r\n          </ng-container>\r\n            <div *ngIf=\"type==='edit'  && type !=='view'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">Edit your user details</div>\r\n            </div>\r\n            <div class=\"w-100 h-0px scroll\">\r\n                <div class=\"mt-5\" *ngIf=\"userForm\">\r\n                    <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keypress)=\"preventDefault($event)\" class=\"\">\r\n                        <div class=\"row px-0 me-3\">\r\n                            <!-- User Name Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n                              <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Email Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n                              <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Contact Number Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n                              <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                                  <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n                                    <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n                                      {{country.name}} ({{country.phonecode}})\r\n                                    </option>\r\n                                  </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                  <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n                                    id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n                                  <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Role Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n                              <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n                                <option value=\"admin\">Admin</option>\r\n                                <option value=\"user\">User</option>\r\n                              </select>\r\n                              <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Add to Team Field -->\r\n                            <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n                              <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n                              <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n                                           (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n                            </div>\r\n                          </div>\r\n                          \r\n                        <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n                            <h3 class=\"teams-title\"  *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n                            <ng-container *ngIf=\"getPermissions().length\">\r\n                                <ng-container formArrayName=\"rolespermission\">\r\n                                  <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"table-responsive my-2 me-3\">\r\n                                      <div class=\"row w-100\">\r\n                                        <div class=\"title-header mt-4 ms-2\">\r\n                                          {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n                                        <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <table class=\"w-100\">\r\n                                            <tbody>\r\n                                              <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n                                                <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                              </tr>\r\n                                            </tbody>\r\n                                          </table>\r\n                                        </ng-container>\r\n                                        <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n                                          <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                            <div class=\"d-inline-flex mt-3\">\r\n                                              <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n                                              <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n                                                {{ camelCaseToText(modules.get('name')?.value) }}\r\n                                              </label>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </ng-container>\r\n                              </ng-container>\r\n                            \r\n                        </div>\r\n                        <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n                            <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                            <button  class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n                                (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"] }]
+            args: [{ selector: 'lib-add-users', template: "<div  class=\"card pt-0 pb-3 scroll\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5 d-flex\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n            </div>\r\n                \r\n        </div>\r\n        <div class=\"row w-100\">\r\n            <div *ngIf=\"type!=='view' && type!=='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n                    User</a>\r\n                <div class=\"sub-title\">Please add your user details</div>\r\n            </div>\r\n            <!-- <div *ngIf=\"type==='edit'\" class=\"col-md-12\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit User Details</a>\r\n                <div class=\"sub-title\">Please Edit your user details</div>\r\n            </div> -->\r\n            <div *ngIf=\"type==='view' && type !=='edit'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">View your user details</div>\r\n            </div>\r\n            <ng-container *ngIf=\"operationType!=='view'\">\r\n            <div *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit && type ==='view'  && type !=='edit' && user?.role !== 'superadmin'\" class=\"col-md-3 text-end px-0\" (click)=\"editUser()\">\r\n                <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_3833_85908)\">\r\n                            <path\r\n                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_3833_85908\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></button>\r\n            </div>\r\n          </ng-container>\r\n            <div *ngIf=\"type==='edit'  && type !=='view'\" class=\"col-md-9\">\r\n                <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">User Details</a>\r\n                <div class=\"sub-title\">Edit your user details</div>\r\n            </div>\r\n            <div class=\"w-100 h-0px scroll\">\r\n                <div class=\"mt-5\" *ngIf=\"userForm\">\r\n                    <form [formGroup]=\"userForm\" novalidate=\"novalidate\" (keydown.enter)=\"preventClose($event)\" class=\"\">\r\n                        <div class=\"row px-0 me-3\">\r\n                            <!-- User Name Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"username\" class=\"form-label\">User Name <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"userName\" autocomplete=\"off\" (keypress)=\"omitSpecialChar($event)\" (paste)=\"omitSpecialCharPaste($event)\">\r\n                              <div *ngIf=\"userForm.get('userName')?.invalid && (userForm.get('userName')?.dirty)\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('userName')?.errors?.['required']\">User Name is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Email Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"email\" class=\"form-label\">Email <span class=\"alert-required text-danger\">*</span></label>\r\n                              <input type=\"email\" class=\"form-control\" id=\"email\" formControlName=\"email\" autocomplete=\"off\">\r\n                              <div *ngIf=\"userForm.get('email')?.invalid && userForm.get('email')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['required']\">Email is required.</small>\r\n                                <small *ngIf=\"userForm.get('email')?.errors?.['pattern']\">Invalid email format.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Contact Number Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"contact\" class=\"form-label\">Contact Number <span class=\"alert-required text-danger\">*</span></label>\r\n                              <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                                  <select class=\"form-select ps-3 pe-8\" id=\"inputGroupSelect01\" formControlName=\"countryCode\">\r\n                                    <option *ngFor=\"let country of countryList\" [value]=\"country.phonecode\">\r\n                                      {{country.name}} ({{country.phonecode}})\r\n                                    </option>\r\n                                  </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                  <input type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\"\r\n                                    id=\"mobileNumber\" autocomplete=\"off\" formControlName=\"mobileNumber\" minlength=\"8\" maxlength=\"13\">\r\n                                  <div *ngIf=\"userForm.get('mobileNumber')?.invalid && userForm.get('mobileNumber')?.touched\" class=\"text-danger\">\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['required']\">Contact Number is required.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['minlength']\">Contact Number must be at least 8 digits.</small>\r\n                                    <small *ngIf=\"userForm.get('mobileNumber')?.errors?.['maxlength']\">Contact Number cannot exceed 13 digits.</small>\r\n                                  </div>\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Role Field -->\r\n                            <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                              <label for=\"role\" class=\"form-label\">Role <span class=\"alert-required text-danger\">*</span></label>\r\n                              <select class=\"form-select\" formControlName=\"role\" (change)=\"onRoleChange(userForm.get('role')?.value)\">\r\n                                <option value=\"admin\">Admin</option>\r\n                                <option value=\"user\">User</option>\r\n                              </select>\r\n                              <div *ngIf=\"userForm.get('role')?.invalid && userForm.get('role')?.touched\" class=\"text-danger\">\r\n                                <small *ngIf=\"userForm.get('role')?.errors?.['required']\">Role is required.</small>\r\n                              </div>\r\n                            </div>\r\n                          \r\n                            <!-- Add to Team Field -->\r\n                            <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\" *ngIf=\"this.userType !=='tango'\">\r\n                              <label for=\"teamLead\" class=\"form-label teams-title\">Add to a team</label>\r\n                              <team-select [items]=\"teamList\" [multi]=\"true\" [searchField]=\"'teamName'\" [idField]=\"'_id'\" [disabled]=\"type === 'view' ? true : false\"\r\n                                           (selected)=\"onStoreSelect($event)\" [selectedValues]=\"selectedUser\"></team-select>\r\n                            </div>\r\n                          </div>\r\n                          \r\n                        <div *ngIf=\"userForm.get('role')?.value === 'admin'\">\r\n\r\n                            <h3 class=\"teams-title\"  *ngIf=\"getPermissions().length\">Access for Admin</h3>\r\n                            <ng-container *ngIf=\"getPermissions().length\">\r\n                                <ng-container formArrayName=\"rolespermission\">\r\n                                  <ng-container *ngFor=\"let rolespermission of getPermissions().controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"table-responsive my-2 me-3\">\r\n                                      <div class=\"row w-100\">\r\n                                        <div class=\"title-header mt-4 ms-2\">\r\n                                          {{ camelCaseToText(rolespermission.get('featureName')?.value) }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"rolespermission.get('modules')\" formArrayName=\"modules\">\r\n                                        <ng-container *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <table class=\"w-100\">\r\n                                            <tbody>\r\n                                              <tr *ngIf=\"rolespermission.get('featureName')?.value !== 'TangoAdmin'\">\r\n                                                <td class=\"w-50\">{{ camelCaseToText(modules.get('name')?.value) }}</td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input type=\"checkbox\" formControlName=\"isAdd\" class=\"cursor-pointer\" (change)=\"handleViewChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Add</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                                <td class=\"text-start\">\r\n                                                  <div class=\"d-inline-flex align-items-center\">\r\n                                                    <input formControlName=\"isEdit\" type=\"checkbox\" class=\"cursor-pointer\" (change)=\"handleEditChange(modules)\">\r\n                                                    <label class=\"global-label ms-2 mt-auto\">Edit</label>\r\n                                                  </div>\r\n                                                </td>\r\n                                              </tr>\r\n                                            </tbody>\r\n                                          </table>\r\n                                        </ng-container>\r\n                                        <div *ngIf=\"rolespermission.get('featureName')?.value === 'TangoAdmin'\" class=\"row w-100 text-nowrap\">\r\n                                          <div class=\"col-md-4\" *ngFor=\"let modules of getFeaturePermissions(rolespermission)?.controls; let j = index\" [formGroupName]=\"j\">\r\n                                            <div class=\"d-inline-flex mt-3\">\r\n                                              <input type=\"checkbox\" class=\"cursor-pointer\" formControlName=\"isEdit\">\r\n                                              <label class=\"global-label mb-5 mx-2 mt-1\" style=\"text-wrap:nowrap\">\r\n                                                {{ camelCaseToText(modules.get('name')?.value) }}\r\n                                              </label>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </ng-container>\r\n                                </ng-container>\r\n                              </ng-container>\r\n                            \r\n                        </div>\r\n                        <div *ngIf=\"type!=='view'\" class=\"d-flex my-10\" role=\"group\">\r\n                            <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                            <button  class=\"btn btn-primary w-100 ms-3\" id=\"alert-toast\"\r\n                                (click)=\"onSubmit()\" [disabled]=\"userForm.invalid || type === 'view'\">Submit</button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".scroll{overflow-y:auto;overflow-x:hidden}.title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.teams-title{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.title-header{border-radius:6px!important;border-bottom:2px solid var(--Gray-200, #EAECF0)!important;background:#f2f4f7!important;box-shadow:0 4px 10px #0000000d!important;color:var(--Black, #101828)!important;font-size:20px!important;font-weight:600;line-height:30px;padding:8px 16px}input[type=checkbox]{width:18px!important;height:18px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0;padding-top:12px;padding-right:6px}.global-label{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:500;line-height:24px}.w-25{width:40%!important}td{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important;line-height:24px}tr,.add-team{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}input[disabled]{pointer-events:none;opacity:.5}\n"] }]
         }], ctorParameters: () => [{ type: ManageUsersService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbActiveModal }, { type: i3.FormBuilder }, { type: UserService }, { type: i4.ToastService }, { type: i2.GlobalStateService }], propDecorators: { type: [{
                 type: Input
             }], user: [{
@@ -1692,7 +1692,7 @@ class AssignStorePopupComponent {
     }
     getteamsList() {
         this.userService
-            .getAssignteams({ clientId: this.$headerFilters.client })
+            .getAssignteams({ clientId: this.$headerFilters.client, userEmail: this.user?.email })
             .subscribe({
             next: (res) => {
                 if (res && res.code == 200) {
@@ -5102,11 +5102,12 @@ class TeamsListComponent {
         }
     }
     uploadErrors = [];
+    processedArray = [];
     onUpload(e) {
         let data = [];
         let error = [];
-        const processedArray = [];
         let storeName = '';
+        this.processedArray = [];
         const file = e.target.files[0];
         const allowedExtensions = /\.(xls|xlsx|csv)$/i;
         const allowedTypes = [
@@ -5175,7 +5176,7 @@ class TeamsListComponent {
                     if (element?.['User Email/User Name'] == '' || element?.['User Email/User Name'] == null) {
                         error.push(`Invalid User Email/User Name - C${index + 2}`);
                     }
-                    processedArray.push({
+                    this.processedArray.push({
                         teamName: data[index]['Team Name'],
                         leadEmail: data[index]['Lead Email'],
                         userName: data[index]['User Email/User Name']
@@ -5197,10 +5198,11 @@ class TeamsListComponent {
                 else {
                     this.userService
                         .teamsBulkUpload({
-                        users: processedArray,
+                        users: this.processedArray,
                         clientId: this.$headerFilters?.client
                             ? this.$headerFilters?.client
                             : this.$headerFilters?.clientId,
+                        isChecked: true
                     })
                         .subscribe({
                         next: (res) => {
@@ -5236,9 +5238,11 @@ class TeamsListComponent {
                                     error: err.error.error
                                 };
                                 this.afterUplload(popupcontent);
+                                this.inputFile.nativeElement.value = "";
                             }
                             else if (err.error.code === 500) {
                                 this.ts.getErrorToast(err.error.error);
+                                this.inputFile.nativeElement.value = "";
                             }
                             this.inputFile.nativeElement.value = "";
                         },
@@ -5360,6 +5364,7 @@ class TeamsListComponent {
         });
     }
     afterUplload(data) {
+        console.log('this.excelError', this.excelError);
         this.excelError = data;
         this.modalService.open(this.afterValidation, { centered: true, backdrop: 'static' });
     }
@@ -5368,19 +5373,49 @@ class TeamsListComponent {
         return uniqueUserNames.size;
     }
     validateDetails() {
-        this.modalService.dismissAll();
-        this.viewTeams = false;
-        this.loadTable();
+        this.userService
+            .teamsBulkUpload({
+            users: this.processedArray,
+            clientId: this.$headerFilters?.client
+                ? this.$headerFilters?.client
+                : this.$headerFilters?.clientId
+        })
+            .subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.modalService.dismissAll();
+                    this.viewTeams = false;
+                    this.loadTable();
+                }
+            },
+            error: (err) => {
+                if (err.error.code === 400) {
+                    const popupcontent = {
+                        displayprop: false,
+                        imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
+                        title: `Invalid details!`,
+                        content: `Please provide correct and complete store information.`,
+                        buttontype: 'error',
+                        error: err.error.error
+                    };
+                    this.afterUplload(popupcontent);
+                }
+                else if (err.error.code === 500) {
+                    this.ts.getErrorToast(err.error.error);
+                }
+                this.inputFile.nativeElement.value = "";
+            },
+        });
     }
     closeactivepopup() {
         this.modalService.dismissAll();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ManageUsersService }, { token: ExcelService }, { token: i2.GlobalStateService }, { token: i4.ToastService }, { token: i3$1.Router }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsListComponent, selector: "lib-teams-list", outputs: { dataTo: "dataTo" }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipContents", first: true, predicate: ["tooltipContents"], descendants: true }, { propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div>\r\n    <div class=\"\" *ngIf=\"!loading  &&  !viewTeams&&!showcreatebutton\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n        </h3>\r\n        <div class=\"card-toolbar rightcorner\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n                    <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\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=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            <span class=\"ms-2\">Delete All</span>\r\n                        </div>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div *ngIf=\"!loading && !noData &&  !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n        <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n               <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n                <g clip-path=\"url(#clip0_12293_6263)\">\r\n                <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_12293_6263\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span>\r\n                <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span></span>\r\n            </div>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n                                class=\"cursor-pointer\"></span>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Name\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Email\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n                        <tr>\r\n                            <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n                            <td>{{user?.teamName}}</td>\r\n                            <td>{{user?.userscount}}</td>\r\n                            <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n                            </td> -->\r\n                            <td><div class=\"mx-2\">\r\n                                <div class=\"table-title\">\r\n                                    <span class=\"camerastatus\">\r\n                                        <span>\r\n                                            {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n                                        </span>\r\n                                        <span *ngIf=\"user?.leadName.length > 1\">\r\n                                            +{{ user.leadName.length - 1 }}\r\n                                        </span>\r\n                                    </span>\r\n\r\n                                    <!-- <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"w-100\">{{ user.leadName}}</span>\r\n                                            <span *ngIf=\"user.leademail.length > 1\">\r\n                                                +{{ user.leademail.length - 1 }} more\r\n                                            </span>\r\n                                        </div>\r\n                                    </ng-template> -->\r\n                                </div>\r\n                            </div></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                                            {{user?.leademail.slice(0,1) | uppercase }}\r\n                                        </span>\r\n                                    </span>\r\n                                </div> -->\r\n                                    <div class=\"symbol symbol-35px symbol-circle\">\r\n                                        <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n                                            <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                {{ user?.leademail[0]?.substring(0, 2) | uppercase  }}\r\n                                            </span>\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"mx-2\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"camerastatus\">\r\n                                                <span>\r\n                                                    {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n                                                </span>\r\n                                                <span *ngIf=\"user?.leademail.length > 1\">\r\n                                                    +{{ user.leademail.length - 1 }}\r\n                                                </span>\r\n                                            </span>\r\n\r\n                                            <!-- <ng-template #tooltipContents>\r\n                                                <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                                    <span class=\"w-100\">{{ user.leademail}}</span>\r\n                                                </div>\r\n                                            </ng-template> -->\r\n                                        </div>\r\n                                    </div>\r\n                                    <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n                            <td>\r\n                                <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g id=\"eye\">\r\n                                            <g id=\"Icon\">\r\n                                                <path\r\n                                                    d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                                <path\r\n                                                    d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </g>\r\n                                        </g>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_2181_11160)\">\r\n                                            <path\r\n                                                d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2181_11160\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!loading && !noData  &&  !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    <div *ngIf=\"loading\" 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 mb-10\">\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 *ngIf=\"noData&&!showcreatebutton\">\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 *ngIf=\"showcreatebutton\" class=\"row\">\r\n        <div class=\"ms-3  right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n            <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n                <g filter=\"url(#filter0_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n                        fill=\"url(#paint0_linear_1030_48016)\" />\r\n                    <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter1_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n                        fill=\"url(#paint1_linear_1030_48016)\" />\r\n                    <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter2_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n                        fill=\"url(#paint2_linear_1030_48016)\" />\r\n                    <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n                <g filter=\"url(#filter3_b_1030_48016)\">\r\n                    <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n                    <path\r\n                        d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n                        fill=\"white\" />\r\n                    <path\r\n                        d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                </g>\r\n                <defs>\r\n                    <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n                        color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n                        <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                </defs>\r\n            </svg>\r\n            <div class=\"nodata-title\">Start by creating a team</div>\r\n            <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n        </div>\r\n    \r\n        <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n            <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n            <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg></span>Create\r\n                Team</button>\r\n        </div>\r\n    </div> -->\r\n\r\n     <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n      <div class=\"mb-5\">\r\n        <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n          <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n        </div> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n        <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </div>\r\n      <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n      <div class=\"fw-bold text-gray-800 my-6\">\r\n        <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n          <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n          <li class=\"user-text mb-2\">Download the template here -\r\n            <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n                  stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <span class=\"template ms-2\">Download Template</span>\r\n            </a>\r\n          </li>\r\n          <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n          <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n        <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n          class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n          (change)=\"onUpload($event)\"\r\n          ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n        <label for=\"kt_create_account_form_account_type_personal\"\r\n          class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n            class=\"fw-bold fs-4\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n              fill=\"none\">\r\n              <path\r\n                d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n                stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg> \r\n            <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n        </label>\r\n        <p class=\"text-gray-400 fw-bold my-3\">\r\n          <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span>\r\n        </p>\r\n        <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n          class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n        <label for=\"kt_account_team_size_select_1\"\r\n          class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          <span class=\"fw-bold fs-4 mx-2\">\r\n              Add Single Team</span></label>\r\n      </div>\r\n    \r\n    \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n    <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n             <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\">\r\n                   <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                         <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n                         <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n                   </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n                        <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n                        <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n                <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n                \r\n                 </div>\r\n            <div *ngIf=\"excelError?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n                <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n             <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"card-footer border-0 text-end pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n            <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n            <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n            <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n                                            (change)=\"onUpload($event)\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n            <div class=\"mt-3\">\r\n                 <div class=\"mt-3\">\r\n                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n                     <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                     </svg>\r\n                 </div>\r\n                <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n            <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;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}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ViewteamsListComponent, selector: "lib-viewteams-list", inputs: ["teamData"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TeamsListComponent, selector: "lib-teams-list", outputs: { dataTo: "dataTo" }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipContents", first: true, predicate: ["tooltipContents"], descendants: true }, { propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }, { propertyName: "afterValidation", first: true, predicate: ["afterValidation"], descendants: true }, { propertyName: "confirmDelete", first: true, predicate: ["confirmDelete"], descendants: true }], ngImport: i0, template: "<div>\r\n    <div class=\"\" *ngIf=\"!loading  &&  !viewTeams&&!showcreatebutton\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n        </h3>\r\n        <div class=\"card-toolbar rightcorner\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n                    <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\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=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            <span class=\"ms-2\">Delete All</span>\r\n                        </div>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div *ngIf=\"!loading && !noData &&  !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n        <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n               <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n                <g clip-path=\"url(#clip0_12293_6263)\">\r\n                <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_12293_6263\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span>\r\n                <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span></span>\r\n            </div>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n                                class=\"cursor-pointer\"></span>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Name\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Email\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n                        <tr>\r\n                            <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n                            <td>{{user?.teamName}}</td>\r\n                            <td>{{user?.userscount}}</td>\r\n                            <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n                            </td> -->\r\n                            <td><div class=\"mx-2\">\r\n                                <div class=\"table-title\">\r\n                                    <span class=\"camerastatus\">\r\n                                        <span>\r\n                                            {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n                                        </span>\r\n                                        <span *ngIf=\"user?.leadName.length > 1\">\r\n                                            +{{ user.leadName.length - 1 }}\r\n                                        </span>\r\n                                    </span>\r\n\r\n                                    <!-- <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"w-100\">{{ user.leadName}}</span>\r\n                                            <span *ngIf=\"user.leademail.length > 1\">\r\n                                                +{{ user.leademail.length - 1 }} more\r\n                                            </span>\r\n                                        </div>\r\n                                    </ng-template> -->\r\n                                </div>\r\n                            </div></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                                            {{user?.leademail.slice(0,1) | uppercase }}\r\n                                        </span>\r\n                                    </span>\r\n                                </div> -->\r\n                                    <div class=\"symbol symbol-35px symbol-circle\">\r\n                                        <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n                                            <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                {{ user?.leademail[0]?.substring(0, 2) | uppercase  }}\r\n                                            </span>\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"mx-2\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"camerastatus\">\r\n                                                <span>\r\n                                                    {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n                                                </span>\r\n                                                <span *ngIf=\"user?.leademail.length > 1\">\r\n                                                    +{{ user.leademail.length - 1 }}\r\n                                                </span>\r\n                                            </span>\r\n\r\n                                            <!-- <ng-template #tooltipContents>\r\n                                                <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                                    <span class=\"w-100\">{{ user.leademail}}</span>\r\n                                                </div>\r\n                                            </ng-template> -->\r\n                                        </div>\r\n                                    </div>\r\n                                    <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n                            <td>\r\n                                <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g id=\"eye\">\r\n                                            <g id=\"Icon\">\r\n                                                <path\r\n                                                    d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                                <path\r\n                                                    d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </g>\r\n                                        </g>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_2181_11160)\">\r\n                                            <path\r\n                                                d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2181_11160\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!loading && !noData  &&  !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    <div *ngIf=\"loading\" 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 mb-10\">\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 *ngIf=\"noData&&!showcreatebutton\">\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 *ngIf=\"showcreatebutton\" class=\"row\">\r\n        <div class=\"ms-3  right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n            <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n                <g filter=\"url(#filter0_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n                        fill=\"url(#paint0_linear_1030_48016)\" />\r\n                    <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter1_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n                        fill=\"url(#paint1_linear_1030_48016)\" />\r\n                    <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter2_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n                        fill=\"url(#paint2_linear_1030_48016)\" />\r\n                    <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n                <g filter=\"url(#filter3_b_1030_48016)\">\r\n                    <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n                    <path\r\n                        d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n                        fill=\"white\" />\r\n                    <path\r\n                        d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                </g>\r\n                <defs>\r\n                    <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n                        color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n                        <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                </defs>\r\n            </svg>\r\n            <div class=\"nodata-title\">Start by creating a team</div>\r\n            <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n        </div>\r\n    \r\n        <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n            <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n            <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg></span>Create\r\n                Team</button>\r\n        </div>\r\n    </div> -->\r\n\r\n     <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n      <div class=\"mb-5\">\r\n        <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n          <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n        </div> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n        <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </div>\r\n      <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n      <div class=\"fw-bold text-gray-800 my-6\">\r\n        <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n          <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n          <li class=\"user-text mb-2\">Download the template here -\r\n            <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n                  stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <span class=\"template ms-2\">Download Template</span>\r\n            </a>\r\n          </li>\r\n          <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n          <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n        <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n          class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n          (change)=\"onUpload($event)\"\r\n          ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n        <label for=\"kt_create_account_form_account_type_personal\"\r\n          class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n            class=\"fw-bold fs-4\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n              fill=\"none\">\r\n              <path\r\n                d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n                stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg> \r\n            <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n        </label>\r\n        <p class=\"text-gray-400 fw-bold my-3\">\r\n          <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span>\r\n        </p>\r\n        <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n          class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n        <label for=\"kt_account_team_size_select_1\"\r\n          class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          <span class=\"fw-bold fs-4 mx-2\">\r\n              Add Single Team</span></label>\r\n      </div>\r\n    \r\n    \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n    <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n             <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\">\r\n                   <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                         <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n                         <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n                   </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n                        <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n                        <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n                <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n                \r\n                 </div>\r\n            <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n                <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n             <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"card-footer border-0 text-end pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n            <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n            <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n            <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n                                            (change)=\"onUpload($event)\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n            <div class=\"mt-3\">\r\n                 <div class=\"mt-3\">\r\n                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n                     <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                     </svg>\r\n                 </div>\r\n                <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n            <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;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}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ViewteamsListComponent, selector: "lib-viewteams-list", inputs: ["teamData"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TeamsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-teams-list', template: "<div>\r\n    <div class=\"\" *ngIf=\"!loading  &&  !viewTeams&&!showcreatebutton\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n        </h3>\r\n        <div class=\"card-toolbar rightcorner\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n                    <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\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=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            <span class=\"ms-2\">Delete All</span>\r\n                        </div>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div *ngIf=\"!loading && !noData &&  !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n        <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n               <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n                <g clip-path=\"url(#clip0_12293_6263)\">\r\n                <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_12293_6263\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span>\r\n                <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span></span>\r\n            </div>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n                                class=\"cursor-pointer\"></span>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Name\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Email\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n                        <tr>\r\n                            <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n                            <td>{{user?.teamName}}</td>\r\n                            <td>{{user?.userscount}}</td>\r\n                            <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n                            </td> -->\r\n                            <td><div class=\"mx-2\">\r\n                                <div class=\"table-title\">\r\n                                    <span class=\"camerastatus\">\r\n                                        <span>\r\n                                            {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n                                        </span>\r\n                                        <span *ngIf=\"user?.leadName.length > 1\">\r\n                                            +{{ user.leadName.length - 1 }}\r\n                                        </span>\r\n                                    </span>\r\n\r\n                                    <!-- <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"w-100\">{{ user.leadName}}</span>\r\n                                            <span *ngIf=\"user.leademail.length > 1\">\r\n                                                +{{ user.leademail.length - 1 }} more\r\n                                            </span>\r\n                                        </div>\r\n                                    </ng-template> -->\r\n                                </div>\r\n                            </div></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                                            {{user?.leademail.slice(0,1) | uppercase }}\r\n                                        </span>\r\n                                    </span>\r\n                                </div> -->\r\n                                    <div class=\"symbol symbol-35px symbol-circle\">\r\n                                        <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n                                            <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                {{ user?.leademail[0]?.substring(0, 2) | uppercase  }}\r\n                                            </span>\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"mx-2\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"camerastatus\">\r\n                                                <span>\r\n                                                    {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n                                                </span>\r\n                                                <span *ngIf=\"user?.leademail.length > 1\">\r\n                                                    +{{ user.leademail.length - 1 }}\r\n                                                </span>\r\n                                            </span>\r\n\r\n                                            <!-- <ng-template #tooltipContents>\r\n                                                <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                                    <span class=\"w-100\">{{ user.leademail}}</span>\r\n                                                </div>\r\n                                            </ng-template> -->\r\n                                        </div>\r\n                                    </div>\r\n                                    <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n                            <td>\r\n                                <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g id=\"eye\">\r\n                                            <g id=\"Icon\">\r\n                                                <path\r\n                                                    d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                                <path\r\n                                                    d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </g>\r\n                                        </g>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_2181_11160)\">\r\n                                            <path\r\n                                                d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2181_11160\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!loading && !noData  &&  !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    <div *ngIf=\"loading\" 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 mb-10\">\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 *ngIf=\"noData&&!showcreatebutton\">\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 *ngIf=\"showcreatebutton\" class=\"row\">\r\n        <div class=\"ms-3  right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n            <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n                <g filter=\"url(#filter0_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n                        fill=\"url(#paint0_linear_1030_48016)\" />\r\n                    <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter1_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n                        fill=\"url(#paint1_linear_1030_48016)\" />\r\n                    <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter2_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n                        fill=\"url(#paint2_linear_1030_48016)\" />\r\n                    <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n                <g filter=\"url(#filter3_b_1030_48016)\">\r\n                    <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n                    <path\r\n                        d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n                        fill=\"white\" />\r\n                    <path\r\n                        d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                </g>\r\n                <defs>\r\n                    <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n                        color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n                        <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                </defs>\r\n            </svg>\r\n            <div class=\"nodata-title\">Start by creating a team</div>\r\n            <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n        </div>\r\n    \r\n        <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n            <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n            <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg></span>Create\r\n                Team</button>\r\n        </div>\r\n    </div> -->\r\n\r\n     <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n      <div class=\"mb-5\">\r\n        <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n          <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n        </div> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n        <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </div>\r\n      <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n      <div class=\"fw-bold text-gray-800 my-6\">\r\n        <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n          <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n          <li class=\"user-text mb-2\">Download the template here -\r\n            <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n                  stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <span class=\"template ms-2\">Download Template</span>\r\n            </a>\r\n          </li>\r\n          <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n          <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n        <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n          class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n          (change)=\"onUpload($event)\"\r\n          ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n        <label for=\"kt_create_account_form_account_type_personal\"\r\n          class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n            class=\"fw-bold fs-4\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n              fill=\"none\">\r\n              <path\r\n                d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n                stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg> \r\n            <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n        </label>\r\n        <p class=\"text-gray-400 fw-bold my-3\">\r\n          <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span>\r\n        </p>\r\n        <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n          class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n        <label for=\"kt_account_team_size_select_1\"\r\n          class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          <span class=\"fw-bold fs-4 mx-2\">\r\n              Add Single Team</span></label>\r\n      </div>\r\n    \r\n    \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n    <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n             <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\">\r\n                   <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                         <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n                         <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n                   </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n                        <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div [ngClass]=\"excelError ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n                        <div [ngClass]=\"excelError ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"!excelError\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n                <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n                \r\n                 </div>\r\n            <div *ngIf=\"excelError?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n                <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n             <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"card-footer border-0 text-end pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n            <button *ngIf=\"!excelError\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n            <button *ngIf=\"excelError\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n            <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n                                            (change)=\"onUpload($event)\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n            <div class=\"mt-3\">\r\n                 <div class=\"mt-3\">\r\n                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n                     <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                     </svg>\r\n                 </div>\r\n                <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n            <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;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}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"] }]
+            args: [{ selector: 'lib-teams-list', template: "<div>\r\n    <div class=\"\" *ngIf=\"!loading  &&  !viewTeams&&!showcreatebutton\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n        </h3>\r\n        <div class=\"card-toolbar rightcorner\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span *ngIf=\"!selectedUsers?.length\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input *ngIf=\"!selectedUsers?.length\" type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData&& !selectedUsers?.length \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline px-4 py-3 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd && teamsList.length>0 && !selectedUsers?.length\" type=\"button\" (click)=\"openTeam()\" class=\"btn btn-sm py-3 btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n                    <div *ngIf=\"selectedUsers?.length\" class=\"btn-delete cursor-pointer px-5 mx-2 rounded-3 text-nowrap\" (click)=\"DeleteAllTeam()\">\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=\"M2.5 4.99996H4.16667M4.16667 4.99996H17.5M4.16667 4.99996V16.6666C4.16667 17.1087 4.34226 17.5326 4.65482 17.8451C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8451C15.6577 17.5326 15.8333 17.1087 15.8333 16.6666V4.99996H4.16667ZM6.66667 4.99996V3.33329C6.66667 2.89127 6.84226 2.46734 7.15482 2.15478C7.46738 1.84222 7.89131 1.66663 8.33333 1.66663H11.6667C12.1087 1.66663 12.5326 1.84222 12.8452 2.15478C13.1577 2.46734 13.3333 2.89127 13.3333 3.33329V4.99996M8.33333 9.16663V14.1666M11.6667 9.16663V14.1666\" stroke=\"#B42318\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            <span class=\"ms-2\">Delete All</span>\r\n                        </div>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"card-header border-0 pt-3 left-move\">\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 \">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n                        name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n\r\n\r\n                    <button *ngIf=\"!loading && !noData \" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline p-4 btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                    <button type=\"button\" (click)=\"createTeam()\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n                                stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg><span class=\"ms-2 text-white\">Create Team</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div *ngIf=\"!loading && !noData &&  !viewTeams&&teamsList.length>0\" class=\"card-body p-0\">\r\n        <div *ngIf=\"selectedUsers?.length\" class=\"alert-box\">\r\n               <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"36\" viewBox=\"0 0 37 36\" fill=\"none\">\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"2.5\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\"/>\r\n                <g clip-path=\"url(#clip0_12293_6263)\">\r\n                <path d=\"M25.1666 17.3866V18C25.1658 19.4376 24.7003 20.8364 23.8395 21.9878C22.9787 23.1393 21.7688 23.9816 20.3902 24.3892C19.0115 24.7968 17.5381 24.7479 16.1896 24.2497C14.841 23.7515 13.6897 22.8307 12.9072 21.6247C12.1248 20.4186 11.7531 18.992 11.8477 17.5575C11.9423 16.123 12.4981 14.7575 13.4321 13.6647C14.3662 12.5718 15.6284 11.8102 17.0307 11.4934C18.433 11.1766 19.9001 11.3215 21.2133 11.9066M25.1666 12.6666L18.4999 19.34L16.4999 17.34\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_12293_6263\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10.5 10)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span>\r\n                <span><span>{{selectedUsers.length === teamsList.length ? 'All ' : 'Totally '}}</span>{{selectedUsers.length}} {{ selectedUsers.length > 1 ? 'Clusters' : 'Cluster'}} on this page are selected.</span><span *ngIf=\"!clustersAllselect || getCheckedClusterCount(this.clustersAllselect) < pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('selectAll')\">Select all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span *ngIf=\"clustersAllselect && getCheckedClusterCount(this.clustersAllselect) === pagination.totalCount\" class=\"selectAll\" (click)=\"selectAllClusters('unselect')\">Unselect all {{pagination.totalCount}} Clusters filtered</span>\r\n                <span></span>\r\n            </div>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\" class=\"cursor-pointer\"><span class=\"inputcheck\"><input type=\"checkbox\" (click)=\"onSelectAll()\" [(ngModel)]=\"selectAllChecked\"\r\n                                class=\"cursor-pointer\"></span>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('teamName')\">Team Name\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'teamName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'teamName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('userscount')\">Users\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'userscount' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'userscount' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Name\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leadName' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leadName' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Lead Email\r\n                            <!-- <svg [ngClass]=\"reqdata?.sortColumName === 'leademail' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'leademail' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg> -->\r\n                        </th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('description')\">Description\r\n                            <svg [ngClass]=\"reqdata?.sortColumName === 'description' && reqdata?.sortBy === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"reqdata?.sortColumName === 'description' ? '#00A3FF' : '#667085'\"\r\n                                    stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th style=\"line-height: 21px !important;\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of teamsList;let i=index;\">\r\n                        <tr>\r\n                            <td *ngIf=\"(gs.userAccess |async)?.Global_User_isAdd\"><span class=\"inputcheck\"><input type=\"checkbox\" class=\"cursor-pointer mt-2\" [(ngModel)]=\"user.isChecked\" (click)=\"onSelectedTeam(user,i)\"></span></td>\r\n                            <td>{{user?.teamName}}</td>\r\n                            <td>{{user?.userscount}}</td>\r\n                            <!-- <td>{{user?.leadName}}<span *ngIf=\"user?.Teamleadcount>0\"> +{{user?.Teamleadcount}}</span>\r\n                            </td> -->\r\n                            <td><div class=\"mx-2\">\r\n                                <div class=\"table-title\">\r\n                                    <span class=\"camerastatus\">\r\n                                        <span>\r\n                                            {{ user?.leadName[0]?user?.leadName[0]:\"--\" }}\r\n                                        </span>\r\n                                        <span *ngIf=\"user?.leadName.length > 1\">\r\n                                            +{{ user.leadName.length - 1 }}\r\n                                        </span>\r\n                                    </span>\r\n\r\n                                    <!-- <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"w-100\">{{ user.leadName}}</span>\r\n                                            <span *ngIf=\"user.leademail.length > 1\">\r\n                                                +{{ user.leademail.length - 1 }} more\r\n                                            </span>\r\n                                        </div>\r\n                                    </ng-template> -->\r\n                                </div>\r\n                            </div></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                                            {{user?.leademail.slice(0,1) | uppercase }}\r\n                                        </span>\r\n                                    </span>\r\n                                </div> -->\r\n                                    <div class=\"symbol symbol-35px symbol-circle\">\r\n                                        <span class=\"symbol-label badge-light-primary text-symbol\" *ngIf=\"user?.leademail.length>0\">\r\n                                            <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n                                                {{ user?.leademail[0]?.substring(0, 2) | uppercase  }}\r\n                                            </span>\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"mx-2\">\r\n                                        <div class=\"table-title\">\r\n                                            <span class=\"camerastatus\">\r\n                                                <span>\r\n                                                    {{ getMaskedValue(user?.leademail[0] ,users?.role) }}\r\n                                                </span>\r\n                                                <span *ngIf=\"user?.leademail.length > 1\">\r\n                                                    +{{ user.leademail.length - 1 }}\r\n                                                </span>\r\n                                            </span>\r\n\r\n                                            <!-- <ng-template #tooltipContents>\r\n                                                <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                                    <span class=\"w-100\">{{ user.leademail}}</span>\r\n                                                </div>\r\n                                            </ng-template> -->\r\n                                        </div>\r\n                                    </div>\r\n                                    <span *ngIf=\"user?.Teamleadcount>0\">+{{user?.Teamleadcount}}</span>\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"description\">{{user?.description ? user?.description : \"--\"}}</td>\r\n                            <td>\r\n                                <span class=\"me-3 cursor-pointer\" (click)=\"viewTeamsdata(user)\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g id=\"eye\">\r\n                                            <g id=\"Icon\">\r\n                                                <path\r\n                                                    d=\"M0.833374 10.0002C0.833374 10.0002 4.16671 3.3335 10 3.3335C15.8334 3.3335 19.1667 10.0002 19.1667 10.0002C19.1667 10.0002 15.8334 16.6668 10 16.6668C4.16671 16.6668 0.833374 10.0002 0.833374 10.0002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                                <path\r\n                                                    d=\"M10 12.5002C11.3808 12.5002 12.5 11.3809 12.5 10.0002C12.5 8.61945 11.3808 7.50016 10 7.50016C8.61933 7.50016 7.50004 8.61945 7.50004 10.0002C7.50004 11.3809 8.61933 12.5002 10 12.5002Z\"\r\n                                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\" />\r\n                                            </g>\r\n                                        </g>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"me-3 cursor-pointer\" (click)=\"editTeamsdata(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_2181_11160)\">\r\n                                            <path\r\n                                                d=\"M24.1666 12.4999C24.3855 12.2811 24.6453 12.1074 24.9313 11.989C25.2173 11.8705 25.5238 11.8096 25.8333 11.8096C26.1428 11.8096 26.4493 11.8705 26.7353 11.989C27.0213 12.1074 27.2811 12.2811 27.5 12.4999C27.7188 12.7188 27.8924 12.9786 28.0109 13.2646C28.1294 13.5506 28.1903 13.8571 28.1903 14.1666C28.1903 14.4761 28.1294 14.7826 28.0109 15.0686C27.8924 15.3546 27.7188 15.6144 27.5 15.8333L16.25 27.0833L11.6666 28.3333L12.9166 23.7499L24.1666 12.4999Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_2181_11160\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\"\r\n                                                    transform=\"translate(10 10)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <span *ngIf=\"(gs.userAccess |async)?.Global_User_isEdit\" class=\"cursor-pointer\" (click)=\"deleteTeam(user)\">\r\n                                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M12.5 14.9998H14.1667M14.1667 14.9998H27.5M14.1667 14.9998V26.6665C14.1667 27.1085 14.3423 27.5325 14.6548 27.845C14.9674 28.1576 15.3913 28.3332 15.8333 28.3332H24.1667C24.6087 28.3332 25.0326 28.1576 25.3452 27.845C25.6577 27.5325 25.8333 27.1085 25.8333 26.6665V14.9998H14.1667ZM16.6667 14.9998V13.3332C16.6667 12.8911 16.8423 12.4672 17.1548 12.1547C17.4674 11.8421 17.8913 11.6665 18.3333 11.6665H21.6667C22.1087 11.6665 22.5326 11.8421 22.8452 12.1547C23.1577 12.4672 23.3333 12.8911 23.3333 13.3332V14.9998M18.3333 19.1665V24.1665M21.6667 19.1665V24.1665\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!loading && !noData  &&  !viewTeams&&teamsList.length>0\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"teamsList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    <div *ngIf=\"loading\" 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 mb-10\">\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 *ngIf=\"noData&&!showcreatebutton\">\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 *ngIf=\"showcreatebutton\" class=\"row\">\r\n        <div class=\"ms-3  right-bar py-7 d-flex justify-content-center align-items-center flex-column\">\r\n            <svg width=\"160\" height=\"120\" viewBox=\"0 0 160 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"82\" cy=\"52\" r=\"52\" fill=\"#EAECF0\" />\r\n                <g filter=\"url(#filter0_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M47.7266 79.1098L80.9651 63.6104C82.6339 62.8322 83.3559 60.8485 82.5777 59.1797L62.9484 17.0845L49.6563 12.2466L22.4611 24.9279C20.7923 25.7061 20.0703 27.6898 20.8485 29.3586L43.2959 77.4971C44.074 79.166 46.0577 79.888 47.7266 79.1098Z\"\r\n                        fill=\"url(#paint0_linear_1030_48016)\" />\r\n                    <path d=\"M49.6567 12.2471L62.9489 17.085L53.8838 21.3121L49.6567 12.2471Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter1_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M63.6163 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6228 8H63.6163C61.7749 8 60.2822 9.49271 60.2822 11.3341V64.4491C60.2822 66.2904 61.7749 67.7831 63.6163 67.7831Z\"\r\n                        fill=\"url(#paint1_linear_1030_48016)\" />\r\n                    <path d=\"M93.6226 8L103.625 18.0022H93.6226V8Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <g filter=\"url(#filter2_dd_1030_48016)\">\r\n                    <path\r\n                        d=\"M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z\"\r\n                        fill=\"url(#paint2_linear_1030_48016)\" />\r\n                    <path d=\"M134.936 22.0898L139.773 35.382L130.708 31.1549L134.936 22.0898Z\" fill=\"#D0D5DD\" />\r\n                </g>\r\n                <circle cx=\"27\" cy=\"11\" r=\"5\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"24\" cy=\"109\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"151\" cy=\"35\" r=\"7\" fill=\"#F2F4F7\" />\r\n                <circle cx=\"140\" cy=\"8\" r=\"4\" fill=\"#F2F4F7\" />\r\n                <g filter=\"url(#filter3_b_1030_48016)\">\r\n                    <rect x=\"58\" y=\"62\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#344054\" fill-opacity=\"0.4\" />\r\n                    <path\r\n                        d=\"M74.5 81.6816C72.8425 81.6816 71.5 80.2133 71.5 78.4004C71.5 76.5875 72.8425 75.1191 74.5 75.1191C76.1575 75.1191 77.5 76.5875 77.5 78.4004C77.5 80.2133 76.1575 81.6816 74.5 81.6816ZM89.6483 81.6816C87.9908 81.6816 86.6483 80.2133 86.6483 78.4004C86.6483 76.5875 87.9908 75.1191 89.6483 75.1191C91.3058 75.1191 92.6483 76.5875 92.6483 78.4004C92.6483 80.2133 91.3058 81.6816 89.6483 81.6816ZM85.509 84.3066C85.509 86.4805 83.8965 88.2441 81.909 88.2441C79.9215 88.2441 78.309 86.4805 78.309 84.3066C78.309 82.1328 79.9215 80.3691 81.909 80.3691C83.8965 80.3691 85.509 82.1328 85.509 84.3066Z\"\r\n                        fill=\"white\" />\r\n                    <path\r\n                        d=\"M74.0013 83.7559C71.7925 83.7559 70 85.7164 70 88.1322C70 88.6121 70.36 89.0059 70.7988 89.0059H78.8013H78.8275C77.8338 88.042 77.2038 86.6352 77.2038 85.0684C77.2038 84.7566 77.2263 84.449 77.275 84.1537C76.765 83.8994 76.1988 83.7559 75.6025 83.7559H74.0013Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M85.1725 89.0059H85.1987H93.2012C93.64 89.0059 94 88.6162 94 88.1322C94 85.7164 92.2075 83.7559 89.9987 83.7559H88.3975C87.8012 83.7559 87.235 83.8953 86.725 84.1537C86.77 84.4531 86.7963 84.7566 86.7963 85.0684C86.7963 86.6352 86.17 88.042 85.1725 89.0059Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                    <path\r\n                        d=\"M79.7988 90.3183C77.0388 90.3183 74.8 92.767 74.8 95.7857C74.8 96.3928 75.25 96.8809 75.8013 96.8809H88.1987C88.7537 96.8809 89.2 96.3887 89.2 95.7857C89.2 92.767 86.9613 90.3183 84.2013 90.3183H79.7988Z\"\r\n                        fill=\"#D0D5DD\" />\r\n                </g>\r\n                <defs>\r\n                    <filter id=\"filter0_dd_1030_48016\" x=\"-0.560547\" y=\"8.01953\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter1_dd_1030_48016\" x=\"40.2822\" y=\"8\" width=\"83.3428\" height=\"99.7832\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter2_dd_1030_48016\" x=\"59.4526\" y=\"8\" width=\"104.547\" height=\"112.499\"\r\n                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"8\" />\r\n                        <feGaussianBlur stdDeviation=\"4\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1030_48016\" />\r\n                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                            result=\"hardAlpha\" />\r\n                        <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feOffset dy=\"20\" />\r\n                        <feGaussianBlur stdDeviation=\"12\" />\r\n                        <feColorMatrix type=\"matrix\"\r\n                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                        <feBlend mode=\"normal\" in2=\"effect1_dropShadow_1030_48016\" result=\"effect2_dropShadow_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <filter id=\"filter3_b_1030_48016\" x=\"50\" y=\"54\" width=\"64\" height=\"64\" filterUnits=\"userSpaceOnUse\"\r\n                        color-interpolation-filters=\"sRGB\">\r\n                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                        <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"4\" />\r\n                        <feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur_1030_48016\" />\r\n                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur_1030_48016\" result=\"shape\" />\r\n                    </filter>\r\n                    <linearGradient id=\"paint0_linear_1030_48016\" x1=\"45.7738\" y1=\"79.2396\" x2=\"19.2853\" y2=\"31.4523\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint1_linear_1030_48016\" x1=\"61.7916\" y1=\"67.0755\" x2=\"57.9807\" y2=\"12.571\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                    <linearGradient id=\"paint2_linear_1030_48016\" x1=\"81.1199\" y1=\"62.1785\" x2=\"100.701\" y2=\"11.17\"\r\n                        gradientUnits=\"userSpaceOnUse\">\r\n                        <stop stop-color=\"#E4E7EC\" />\r\n                        <stop offset=\"1\" stop-color=\"#F9FAFB\" />\r\n                    </linearGradient>\r\n                </defs>\r\n            </svg>\r\n            <div class=\"nodata-title\">Start by creating a team</div>\r\n            <div class=\"nodata-sub mt-2\">Any team created will track here.</div>\r\n        </div>\r\n    \r\n        <div class=\"d-flex justify-content-center align-items-center mt-3 mb-10\" role=\"group\">\r\n            <button class=\"btn btn-outline w-25 me-3\">How to create?</button>\r\n            <button [disabled]=\"!(gs.userAccess |async)?.Global_User_isAdd\" class=\"btn btn-primary w-25 ms-3\" id=\"alert-toast\" (click)=\"createTeam()\"><span class=\"mx-2\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.16699V15.8337M4.1665 10.0003H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg></span>Create\r\n                Team</button>\r\n        </div>\r\n    </div> -->\r\n\r\n     <div class=\"card-body d-flex flex-center flex-column p-9\" *ngIf=\"showcreatebutton\">\r\n      <div class=\"mb-5\">\r\n        <!-- <div class=\"symbol symbol-75px symbol-circle\">\r\n          <img alt=\"Pic\" src=\"./assets/tango/Icons/add-store-icon.svg\">\r\n        </div> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\"/>\r\n        <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\"/>\r\n        <path d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </div>\r\n      <a class=\"fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 title cursor-pointer\"> Add teams </a>\r\n      <div class=\"fw-bold text-gray-800 my-6\">\r\n        <ul class=\"custom-ordered-list text-gray-800 fw-bold fs-6\">\r\n          <li class=\"user-text mb-2\">Use the template to upload multiple Teams at once.</li>\r\n          <li class=\"user-text mb-2\">Download the template here -\r\n            <a href=\"./../../assets/files/teamsBulkUploadTemplate.xlsx\" download>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n                  stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <span class=\"template ms-2\">Download Template</span>\r\n            </a>\r\n          </li>\r\n          <li class=\"user-text mb-2\">Add your data to the Template File</li>\r\n          <li class=\"user-text mb-2\">Upload it below for processing</li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"d-flex flex-center flex-column mb-5\" style=\"width: 57% !important;\">\r\n        <input name=\"accountType\" type=\"radio\" id=\"kt_create_account_form_account_type_personal\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\" value=\"personal\"\r\n          class=\"btn-check\" ng-reflect-name=\"accountType\" ng-reflect-form-control-name=\"accountType\"\r\n          (change)=\"onUpload($event)\"\r\n          ng-reflect-value=\"personal\" type=\"file\" #inputFile />\r\n        <label for=\"kt_create_account_form_account_type_personal\"\r\n          class=\"btn btn-outline btn-primary bg-primary btn-outline-default rounded-3 w-50 p-4 mt-5\"><span\r\n            class=\"fw-bold fs-4\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n              fill=\"none\">\r\n              <path\r\n                d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n                stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg> \r\n            <span class=\"text-white mx-2\">Upload To Add Multiple Teams</span></span>\r\n        </label>\r\n        <p class=\"text-gray-400 fw-bold my-3\">\r\n          <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\" fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span><span class=\"mx-2\">Or </span> <span class=\"line-bg \"><svg width=\"224\" height=\"2\" viewBox=\"0 0 124 2\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect y=\"0.5\" width=\"123.333\" height=\"1\" fill=\"#EAECF0\" />\r\n            </svg>\r\n          </span>\r\n        </p>\r\n        <input type=\"radio\" id=\"kt_account_team_size_select_1\" value=\"1-1\" (click)=\"createTeam()\"\r\n          class=\"btn-check ng-untouched ng-pristine ng-valid\" />\r\n        <label for=\"kt_account_team_size_select_1\"\r\n          class=\"btn btn-outline btn-outline-default rounded-3 w-50 p-4 mt-3\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          <span class=\"fw-bold fs-4 mx-2\">\r\n              Add Single Team</span></label>\r\n      </div>\r\n    \r\n    \r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"viewTeams && !showcreatebutton\">\r\n    <lib-viewteams-list [teamData]=\"this.selectedTeam\"></lib-viewteams-list>\r\n</div>\r\n\r\n<ng-template #afterValidation let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n             <div class=\"card-title mt-3\"><span class=\"config-heading fw-semibold w-auto\">Add Teams</span></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\">\r\n                   <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                         <div class=\"fw-semibold config-heading w-100\">{{getStoreCounts(excelData)}}</div>\r\n                         <div class=\"fw-semibold subtitle mt-1\">Total Records</div>\r\n                   </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div class=\"fw-semibold config-heading w-100\">{{excelData?.length}}</div>\r\n                        <div class=\"fw-semibold subtitle mt-1\">Rows processed</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-sm-4\">\r\n                    <div class=\"popup-card rounded-3 p-3 flex-column h-80px\">\r\n                        <div [ngClass]=\"excelError?.error?.length ? 'error-heading':''\" class=\"fw-semibold config-heading w-100\">{{excelError?.error?.length || 0}}</div>\r\n                        <div [ngClass]=\"excelError?.error?.length ? 'excel-error':''\" class=\"fw-semibold subtitle mt-1\">Error</div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"!excelError?.error?.length\" class=\"table-header mt-5\" style=\"font-weight: 400;\">\r\n                <div >You're about to add {{getStoreCounts(excelData)}} clusters. Are you sure want to proceed?</div>\r\n                \r\n                 </div>\r\n            <div *ngIf=\"excelError?.error?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Invalid Details !</div>\r\n                <div class=\"subtitle mt-5\">Please provide correct information.</div>\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of excelError?.error; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"uploadErrors?.doesNotExists?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data not exists !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.doesNotExists; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n             <div *ngIf=\"uploadErrors?.inActive?.length\" class=\"flex-column mt-5\">\r\n                <div class=\"config-heading fw-bold\">Data inactive !</div>\r\n                <!-- <div class=\"subtitle mt-5\">Please provide correct information.</div> -->\r\n                <div class=\"p-5 w-100 rounded-3 border-error mt-5 flex-column\">\r\n                    <div *ngFor=\"let error of uploadErrors?.inActive; let i = index; let last = last\" [ngClass]=\"!last ? 'mb-2' : ''\" class=\"text-error\">{{i + 1}}) {{error}}</div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"card-footer border-0 text-end pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline\" (click)=\"closeactivepopup()\">Cancel</button>\r\n            <button *ngIf=\"!excelError?.error?.length\" class=\"btn btn-md py-3 btn-default ms-3 btn-primary\" (click)=\"validateDetails()\">Proceed</button>\r\n            <button *ngIf=\"excelError?.error?.length\" class=\"btn py-3 btn-md btn-default ms-3 btn-danger\" (click)=\"file1.click()\">Reupload</button>\r\n            <input style=\"visibility: hidden;\" #file1 type=\"file\" id=\"kt_account_team_size_select_2\" accept = \".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n                                            (change)=\"onUpload($event)\" />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmDelete let-model>\r\n    <div class=\"card border-0\">\r\n        <div class=\"card-header border-0 mt-0\">\r\n            <div class=\"mt-3\">\r\n                 <div class=\"mt-3\">\r\n                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEE4E2\"/>\r\n                     <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FEF3F2\" stroke-width=\"8\"/>\r\n                     <path d=\"M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\" stroke=\"#D92D20\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                     </svg>\r\n                 </div>\r\n                <div class=\"config-heading fw-semibold mt-3 w-auto\">Delete {{teamId?.length}} {{teamId?.length > 1 ? 'Teams' : 'Team'}}? </div></div>\r\n        </div>\r\n        <div class=\"card-body pt-0 popup-scroll\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"subtitle\" style=\"font-weight: 400;\">Are you sure you want to delete the selected team? This action cannot be undone.</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-footer border-0 d-flex justify justify-content-between pt-0\">\r\n            <button class=\"btn btn-md btn-default btn-outline w-50 me-2\" (click)=\"model.close()\">Cancel</button>\r\n            <button class=\"btn btn-md py-3 btn-default btn-danger w-50 ms-2\" (click)=\"model.close('submit')\">Delete</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".inputcheck input[type=checkbox]{width:18px!important;height:18px!important;margin:0;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}.inputcheck input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.inputcheck input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:12px;padding-right:6px}.left-move{justify-content:end}.img-src{width:25%;height:20%}.w-25{width:15%!important}td.description{overflow:hidden;text-overflow:ellipsis;max-width:100px}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:0px!important}.rotate{rotate:180deg;transition:1s}td{line-height:30px}.rightcorner{position:absolute;top:10px;right:16px;font-size:18px}.user-text{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.table-header{color:var(--Gray-800, #1D2939);font-size:16px;font-weight:600;line-height:24px}.text-error{color:var(--Error-700, #B42318)!important;font-size:14px;font-weight:500;line-height:20px}.excel-error{color:var(--Error-600, #D92D20);font-size:14px;font-weight:500;line-height:20px}.error-heading{color:var(--Error-600, #D92D20);font-size:20px;font-weight:500;line-height:30px}.border-error{border:1px solid var(--Error-300, #FDA29B)!important;background:var(--Error-25, #FFFBFA)!important}.popup-card{border-radius:6px;border:1px solid var(--Gray-300, #D0D5DD);background:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.btn-delete{border:1px solid var(--Error-50, #FEF3F2);background:var(--Error-50, #FEF3F2);padding:12px 14px;box-shadow:0 1px 2px #1018280d;color:var(--Error-700, #B42318);font-size:14px;font-weight:600;line-height:20px}.alert-box{border-radius:4px;border-left:2px solid var(--Primary-600, #00A3FF);background:var(--Gray-100, #F2F4F7);box-shadow:0 4px 16px #0000001a;display:flex;height:68px;padding:6px 8px 6px 16px;justify-content:center;align-items:center;cursor:pointer;gap:8px;align-self:stretch;color:var(--Gray-500, #667085);font-size:14px;font-weight:600}.alert-box .selectAll{color:var(--Primary-700, #009BF3);font-size:15px;font-weight:700;text-decoration-line:underline;text-decoration-thickness:auto;text-underline-offset:auto}.popup-scroll{min-height:auto;max-height:400px;overflow-y:auto}.subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:500!important;line-height:20px!important}.config-heading{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ManageUsersService }, { type: ExcelService }, { type: i2.GlobalStateService }, { type: i4.ToastService }, { type: i3$1.Router }, { type: i1$1.NgbModal }], propDecorators: { dataTo: [{
                 type: Output
             }], tooltipContent: [{