vc-create-dashboard 2.9.7 → 3.0.0

package/src/lib/create-dashboard-container/services/configure-widgets.service.ts

@@ -1,228 +0,0 @@
-import { Injectable, Optional } from '@angular/core';
-import { widgetDataModel} from '../interfaces/widget-data-model'
-import { HttpClient,  HttpHeaders, JsonpClientBackend } from '@angular/common/http';
-import { catchError, map, retry } from 'rxjs/operators';
-import { JwtHelperService } from '@auth0/angular-jwt';
-import { of } from 'rxjs';
-import { AuthService } from './auth.service';
-import { Configurations } from '../../configurations';
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ConfigureWidgetsService {
-  public env !: any;
-
-  constructor(
-    private http: HttpClient,
-    private authService: AuthService,
-     @Optional() config?: Configurations) { 
-      if (config) {
-        this.env = config.envConfig;
-      }}
-
-  complianceWidgetsData = [
-    {
-      title: 'Overview',
-      id: 'overview_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
-      value: 0,
-    },
-    {
-      title: 'Responsibility Calendar',
-      id: 'compliance_calendar_flag',
-      description: 'Displays all responsibilities that are due on a particular day.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-calender.png',
-      value: 0,
-    },
-    {
-      title: 'Responsibility Center Overview',
-      id: 'responsibility_center_overview_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
-      value: 0,
-    },
-    {
-      title: 'My Responsibilities',
-      id: 'my_responsibilities',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/my-responsibilities.png',
-      tabOption: true,
-      value: 0,
-    },
-    {
-      title: 'Key Responsibilities',
-      id: 'key_responsibilities',
-      description: 'Displays all responsibilities that are due on a particular day.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/key-responsibilities.png',
-      tabOption: true,
-      value: 0,
-    },
-    {
-      title: 'Trend Analysis',
-      id: 'trend_analysis_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/trend-analysis.png',
-      value: 0,
-    },
-    {
-      title: 'Workroom Updates',
-      id: 'workroom_alert_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/workroom-updates.png',
-      value: 0,
-    },
-    {
-      title: 'Recent Activities',
-      id: 'recent_activity_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/recent-activities.png',
-      value: 0,
-    },
-    {
-      title: 'Exception Summary',
-      id: 'exception_summary_flag',
-      description: 'Displays all responsibilities that have been assigned to you.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/exception-summary.png',
-      value: 0,
-    }
-  ];
-
-
-
-  riskWidgetsData = [
-    {
-      title: 'Risk Overview',
-      id: 'risk_overview',
-      description: 'description',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-overview.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/risk-overview.png',
-      value: 0,
-    },
-    {
-      title: 'Risk Appetite & Tolerance',
-      id: 'risk_appetite_tolerance',
-      description: 'description',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png',
-      value: 0,
-    },
-    {
-      title: 'Risk Ratings',
-      id: 'risk_ratings',
-      description: 'Description.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
-      value: 0,
-    },
-    {
-      title: 'Risks Without Controls',
-      id: 'risks_without_controls',
-      description: 'Description',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
-      value: 0,
-    },     
-    {
-      title: 'Risks Exceeding Risk Tolerance',
-      id: 'exceeds_risk_tolerance',
-      description: 'description',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
-      value: 0,
-    },
-    {
-      title: 'Inherent Risk Rating by Responsibility Centers ',
-      id: 'inherent_risk_rating_by_responsibility_centers',
-      description: 'Description.',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-RC.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/inherent-RC.png',
-      value: 0,
-    },
-    {
-      title: 'Residual Risk Rating by Responsibility Centers ',
-      id: 'residual_risk_rating_by_responsibility_centers',
-      description: 'Description.',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-RC.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/residual-RC.png',
-      value: 0,
-    },
-    {
-      title: 'Risk Category Overview',
-      id: 'risk_category_overview',
-      description: 'description',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-category-overview.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png',
-      value: 0,
-    },
-    {
-      title: 'Risk Heatmap',
-      id: 'risk_heatmap',
-      description: 'Description.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-heatmap.png',
-      value: 0,
-    },
-    {
-      title: 'Inherent Risk Rating by Categories',
-      id: 'inherent_risk_rating_by_categories',
-      description: 'Description.',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-categories.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/inherent-categories.png',
-      value: 0,
-    },
-     
-    {
-      title: 'Residual Risk Rating by Categories',
-      id: 'residual_risk_rating_by_categories',
-      description: 'description',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-categories.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/residual-categories.png',
-      value: 0,
-    },
-    {
-      title: 'Inherent Risk Rating Trend by Responsibility Centers',
-      id: 'inherent_risk_rating_trend_by_responsibility_centers',
-      description: 'Description.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
-      value: 0,
-    },
-    {
-      title: 'Residual Risk Rating Trend by Responsibility Centers',
-      id: 'residual_risk_rating_trend_by_responsibility_centers',
-      description: 'Description.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
-      value: 0,
-    },        
-    {
-      title: 'Risk Rating Trend by Categories',
-      id: 'risk_rating_trend_by_categories',
-      description: 'Description.',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
-      value: 0,
-    },
-    {
-      title: 'Top 5 Risk Ratings',
-      id: 'top_5_residual_risk_ratings',
-      description: 'Description.',
-      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/5-risk-ratings.png',
-      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/10-risk-ratings.png',
-      value: 0,
-    },
-  ];
-  auditWidgetsData = [];
-  policyWidgetsData = [];
-
-
-  // For dashboard view
-  dashBoardWidgetUpdate(widGetJson: any) {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.put(this.env.OrganizationPut + 'dashboardWidgets', widGetJson).pipe(retry(2));
-  }
-
-  moduleType(identifier:string){
-   if(JSON.stringify(this.complianceWidgetsData).includes(identifier)){
-    return 'COMPLIANCE'
-   }else if(JSON.stringify(this.riskWidgetsData).includes(identifier)){
-    return 'RISK'
-   }
-  }
-}

package/src/lib/create-dashboard-container/services/create-dashboard.service.spec.ts

@@ -1,19 +0,0 @@
-import { HttpClientModule } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-
-import { CreateDashboardService } from './create-dashboard.service';
-
-describe('CreateDashboardService', () => {
-  let service: CreateDashboardService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientModule]
-    });
-    service = TestBed.inject(CreateDashboardService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/create-dashboard-container/services/create-dashboard.service.ts

@@ -1,139 +0,0 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Injectable, Optional } from '@angular/core';
-import { JwtHelperService } from '@auth0/angular-jwt';
-import { of } from 'rxjs';
-import { catchError, map, retry } from 'rxjs/operators';
-import { Configurations } from '../../configurations';
-import { AuthService } from './auth.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CreateDashboardService {
-  public env !: any;
-
-  httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json', token: this.authService.getAuthorizationToken() })
-  };
-  constructor(private http: HttpClient,
-    private authService: AuthService, @Optional() config?: Configurations) {
-    if (config) {
-      this.env = config.envConfig;
-    }
-  }
-
-  /*
-  * Fetches the Organization Users List by making an API call
-  */
-  getOrganizationUsers(url?: any) {
-    return this.http.get(this.env?.organizationGet + 'organisationUsersList&paginationType=small' +
-      (url.p ? '&p=' + url.p : '') + (url.type ? '&type=' + url.type : '') +
-      (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map((res: any) => {
-        return res;
-      }), retry(2), catchError(err => of(err)));
-  }
-
-  /**
-   * Fetches the OrganizationUsers details of users List to set pagination details including number of
-   * pages and records limit per page,
-   * @param url  contains info about type & search query
-   */
-  getOrganizationUsersCount(url?: any) {
-    return this.http.get(this.env?.organizationGet + 'organisationUsersCount&paginationType=small' +
-      (url.type ? '&type=' + url.type : '') + (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map(res => {
-        return res;
-      }), catchError(err => of(err)));
-  }
-
-  getCategoryList() {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http
-      .get<any[]>(this.env?.riskGet + 'category/list', { headers })
-      .pipe(retry(2));
-  }
-
-  /**
-   * Fetches all users by making an API call
-   */
-  getAllUsers() {
-    return this.http.get(this.env?.organizationGet + 'selectAllUsers&type=all', this.httpOptions).pipe(retry(2));
-  }
-
-  /**
-   *  Fetches all groups by making an API call
-   * */
-   getAllGroups(params?: HttpParams){
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.get(this.env?.organizationGet + 'groupsList&permType=dashboard&memberExists=1', {params, headers}).pipe(retry(2));
-  }
-  
-  /**
-  * Fetches responsibilityCentersList by making an API call
-  */
-  getResponsibilityCenterList() {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.get<any[]>(this.env?.complianceGet + 'responsibilityCenterTree', {
-      headers,
-    }).pipe(retry(2));
-  }
-
-  getComplianceCategoriesList() {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.get<any[]>(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
-      headers,
-    }).pipe(retry(2));
-  }
-
-  getComplianceCategoriesListFromGlobal() {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.get<any[]>(this.env?.complianceGet + 'complianceCategory/CategoryListTree&program=1&isDashboard=true', {
-      headers,
-    }).pipe(retry(2));
-  }
-
-  submitDashboard(payload: any) {
-    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-    return this.http.post(this.env.dashboard+'CreateDashboard', payload, { headers }).pipe(
-      retry(2)
-    );
-  }
-
-  /**
-   * Fetches the Dashboard details for data population to Edit the dashboard
-   * @param id
-   */
-  fetchDashboard(id: any) {
-    return this.http.get(this.env.dashboard + id + '?mode=edit', this.httpOptions).pipe(
-      retry(2)
-    );
-  }
-
-  updateDashboard(id: any, payload: any) {
-    return this.http.put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions).pipe(
-      retry(2)
-    );
-  }
-
-  getUserInformation() {
-    return this.http.get(this.env?.organizationGet + 'users&id=' + this?._ID(), this.httpOptions).pipe(
-      retry(2)
-    );
-  }
-  _ID() {
-    const helper = new JwtHelperService();
-    const myRawToken = localStorage.getItem('currentUser') || '{}';
-    const isExpired = helper?.isTokenExpired(myRawToken);
-    if (isExpired === false) {
-      const tokenInfo = helper?.decodeToken(myRawToken);
-      return tokenInfo._id;
-    }
-    return '';
-  }
-
-  checkDuplicateDashboardName(payload: any) {
-    return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(
-      retry(2)
-    );
-
-  }
-}

package/src/lib/create-dashboard-container/services/pagination.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PaginationService } from './pagination.service';
-
-describe('PaginationService', () => {
-  let service: PaginationService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PaginationService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/create-dashboard-container/services/pagination.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-
-/**
- * Service to implement pagination for users while creating an app
- */
-export class PaginationService {
-  currentPage = 1;
-  searchValue = '';
-  currentValues = new BehaviorSubject({});
-
-  constructor() { }
-
-  setCurrentState() {
-    this.currentValues.next(true);
-  }
-  reset(){
-    this.currentPage = 1;
-    this.searchValue = '';
-  }
-}

package/src/lib/create-dashboard-container/user-list/user-list.component.html

@@ -1,146 +0,0 @@
-<div class="user-list" [class.animate-slideInRight]="animation">
-    <div class="user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
-        <div class="vx-fs-14 vx-fw-500 vx-label-txt">Who can view this dashboard?</div>
-    </div>
-    <div class="user-list-body">
-      <div class="user-list-tab vx-d-flex vx-align-center vx-mb-2" *ngIf="groupsEnabled">
-          <button (click)="switchTab('USER')" class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="currentTab === 'USER'">USERS <span class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{totalList}}</span></button>
-          <button id="switchtab" (click)="switchTab('GROUP')" class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="currentTab === 'GROUP'" >USER GROUPS <span id="groupscount" class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{totalgroups}}</span></button>
-      </div>
-
-      <div class="user-list-search vx-mb-2">
-        <i class="icons">&#xe90b;</i>
-        <input type="text" [(ngModel)]="searchValue" placeholder="{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard" (keyup.enter)="setSearchValue()" (focusout)="setSearchValue()">
-      </div>
-
-      <ng-container *ngIf="currentTab === 'USER'">
-          <div class="vx-d-flex vx-align-center vx-justify-end" *ngIf="totalPages>1">
-              <div class="pagination-box" *ngIf="totalPages>1 && searchList.length>1">             
-                  <app-pagination (paginationFilter)="paginationFilter($event)" [limit]="limit" [totalPages]="totalPages" [totalList]="totalList"></app-pagination>
-              </div>
-          </div>
-          <div class="user-list-body-top" *ngIf="searchList.length !== 0">
-              <app-cs-checkbox *ngIf="!searchValue && searchList.length>1" [ngValue]="selectedList.length == totalList" (ngValueChange)="selectAllUsers($event)">
-                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>
-              </app-cs-checkbox>
-              <app-cs-checkbox *ngIf="searchValue && searchList.length>1" [ngValue]="checkSelectAll()" (ngValueChange)="selectAll($event)">
-                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>
-              </app-cs-checkbox>
-          </div>
-          <div class="list-of-user">
-              <div class="selection-list vx-mb-4" [class.with-group]="groupsEnabled" [class.with-noData]="searchList.length == 0" [class.with-pagination]="totalPages>1 && searchList.length>1">
-                <ul *ngIf="searchList.length !== 0">
-                  <li *ngFor="let data of searchList; let i = index">
-                    <app-cs-checkbox [disabled]="listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])" [ngValue]="selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])" (ngValueChange)="selectElement(data)" [arTooltip]="data[listDetails.tooltipKey]" placement="bottom-left" delay="0" [tooltipMandatory]="true">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>
-                  </li>
-                </ul>
-
-                <app-no-data *ngIf="!vLoader && searchList.length == 0" [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="'No data to display'"></app-no-data>
-              </div>
-
-              <app-loader-inline *ngIf="vLoader"></app-loader-inline>
-          </div>
-      </ng-container>
-
-      <ng-container *ngIf="currentTab === 'GROUP' && groupsEnabled">
-        <ng-container *ngIf="(groupdata) as groups ">
-          <div class="vx-d-flex vx-align-center vx-justify-end" *ngIf="true">
-            <div class="pagination-box" *ngIf="total_group_pages>1">             
-              <app-pagination (paginationFilter)="paginationFilter($event)" [limit]="limit" [totalPages]="total_group_pages" [totalList]="totalgroups"></app-pagination>
-            </div>
-          </div>
-          <ng-container *ngIf="true">
-              <div class="user-list-mid vx-mb-4" [class.with-pagination]="total_group_pages>1">
-                  <ng-container *ngIf="groups?.length > 0">
-                      <div class="user-list-select vx-mb-4">
-                          <app-cs-checkbox [disabled]="false" *ngIf="!searchValue && groups.length>1" [ngValue]="selectedgroupList.length == totalgroups" (ngValueChange)="selectAllGroups($event)">
-                              <div class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>
-                          </app-cs-checkbox>
-                          <app-cs-checkbox [disabled]="false" *ngIf="searchValue && groups.length>1" [ngValue]="checkSelectAllGroups()" (ngValueChange)="selectAllsearchgroups($event)">
-                            <div class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>
-                        </app-cs-checkbox>
-                      </div>
-                      <div class="user-list-item">
-                        <ul class="vx-m-0 vx-p-0 vx-d-flex">
-                          <li class="vx-mb-4" *ngFor="let data of groups; let i = index">
-                            <app-cs-checkbox (ngValueChange)="selectGroupElement(data)" [disabled]="false" [ngValue]="selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])">
-                              <div class="user-name vx-d-flex vx-align-center">  
-                                <div class="group-name" [arTooltip]="data[listDetails.displayGroupKey]" placement="bottom-left"
-                                delay="0" [tooltipMandatory]="true">{{data[listDetails.displayGroupKey]}}</div>
-                                <span id="usersofgroup" class="counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2">{{data["associatedUsers"].length}} {{data["associatedUsers"].length > 1 ? 'USERS' :'USER'}}</span>
-                              </div>
-                            </app-cs-checkbox>
-                          </li>
-                        </ul>
-                      </div>
-                  </ng-container>
-                  <ng-container *ngIf="groups?.length == 0 && !vLoaderGroups">
-                      <app-no-data  [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="(searchKey?.length > 0 ?'No match found.':'No data to display.')"></app-no-data>
-                  </ng-container>
-                  <app-loader-inline *ngIf="vLoaderGroups"></app-loader-inline>
-              </div>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-       
-      <div class="user-floating-bar" *ngIf="groupsEnabled">
-        <div class="user-floating-bar-container vx-d-flex vx-align-center vx-justify-between">
-          <div class="left vx-d-flex vx-align-center">
-              <button class="counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1" *ngIf="selectedList?.length" appPopover (click)="userCount.popover()" placement="left">{{selectedList?.length}}</button>
-              <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2"> 
-                <span *ngIf="selectedList?.length === 1">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>
-                <span *ngIf="selectedList?.length > 1">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>
-              </div>
-              <button class="counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1" *ngIf="selectedgroupList?.length" appPopover (click)="groupCount.popover()" placement="left">{{selectedgroupList?.length}}</button>
-              <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2">
-                <span *ngIf="selectedgroupList?.length === 1">User Group selected</span>
-                <span *ngIf="selectedgroupList?.length > 1">User Groups selected</span>
-              </div>
-
-              <app-popover #userCount [dontCloseonClick]="true">
-                <div class="action-list">
-                  <ul class="action-item">
-                    <li *ngFor="let element of selectedList">
-                      <div class="avatar-card">
-                        <span class="value" [arTooltip]="element.member_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
-                          <i class="icons cross-icon" (click)="selectElement(element)" *ngIf="!listDetails.nonRemovableUsersList.includes(element?.member_id)">&#xe90d;</i> {{element.member_name}}
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </app-popover>
-    
-              <app-popover #groupCount [dontCloseonClick]="true">
-                <div class="action-list">
-                  <ul class="action-item">
-                    <li *ngFor="let element of selectedgroupList">
-                      <div class="avatar-card">
-                        <span class="value" [arTooltip]="element?.group_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
-                          <i class="icons cross-icon" (click)="selectGroupElement(element)">&#xe90d;</i> {{element?.group_name}}
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </app-popover>
-          </div>
-        
-          <div class="right vx-d-flex vx-align-center">
-            <button class="cancel" (click)="closeUserList.emit()">Cancel</button>
-            <button [disabled]="false" (click)="onSubmit()">Next <i class="icons">&#xe91e;</i></button>
-          </div>
-        </div>
-      </div>
-
-      <div class="user-list-footer" *ngIf="!groupsEnabled">
-        <app-dashboard-footer 
-        [footerDetails] ="footerDetails"
-        (cancelEvent)="closeUserList.emit(); paginationService.reset();"
-        (deleteEvent) ="selectElement($event)"
-        (submitEvent)="onSubmit()"
-        [userButtonColor]="'greenBg'"
-        ></app-dashboard-footer>
-      </div>
-    </div>
-</div>