npm - vc-create-dashboard - Versions diffs - 3.0.72 → 3.0.73 - Mend

vc-create-dashboard 3.0.72 → 3.0.73

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

package/fesm2022/vc-create-dashboard.mjs CHANGED Viewed

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
 import dayjs from 'dayjs';
-import * as LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
@@ -49,39 +48,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
+const BASE_URL = 'https://cdn.v-comply.com';
 const ASSETS = {
-    dashBoardIcon: `/libraries/workflow-engine/assets/workflow/what.svg`,
-    dashBoardUsersIcon: `/libraries/workflow-engine/assets/workflow/who.svg`,
-    dashBoardRcIcon: `/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
-    dashBoardProgramIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
-    dashBoardRiskIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
-    dashBoardTimeFrameIcon: `/libraries/workflow-engine/assets/workflow/when.svg`,
-    dashBoardEmailSummariesIcon: `/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
-    configure_widget: `/libraries/configure-widget/assets/images/configure-widget.svg`,
-    overviewWidget: `/libraries/configure-widget/assets/images/overview.png`,
-    responsibilityCalenderWidget: `/libraries/configure-widget/assets/images/responsibility-calender.png`,
-    responsibilityCenterOverviewWidget: `/libraries/configure-widget/assets/images/responsibility-center-overview.png`,
-    myResponsibilitiesWidget: `/libraries/configure-widget/assets/images/my-responsibilities.png`,
-    keyResponsibilitiesWidget: `/libraries/configure-widget/assets/images/key-responsibilities.png`,
-    trendAnalysisWidget: `/libraries/configure-widget/assets/images/trend-analysis.png`,
-    workroomUpdatesWidget: `/libraries/configure-widget/assets/images/workroom-updates.png`,
-    recentActivitiesWidget: `/libraries/configure-widget/assets/images/recent-activities.png`,
-    exceptionSummaryWidget: `/libraries/configure-widget/assets/images/exception-summary.png`,
-    riskOverviewWidget: `/libraries/configure-widget/assets/images/riskV2/risk-overview.png`,
-    appetiteToleranceWidget: `/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png`,
-    inherentRCWidget: `/libraries/configure-widget/assets/images/riskV2/inherent-RC.png`,
-    residualRCWidget: `/libraries/configure-widget/assets/images/riskV2/residual-RC.png`,
-    riskCategoryOverviewWidget: `/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png`,
-    riskHeatmapWidget: `/libraries/configure-widget/assets/images/risk-heatmap.png`,
-    inherentCategoriesWidget: `/libraries/configure-widget/assets/images/riskV2/inherent-categories.png`,
-    residualCategoriesWidget: `/libraries/configure-widget/assets/images/riskV2/residual-categories.png`,
-    tenRiskRatingsWidget: `/libraries/configure-widget/assets/images/10-risk-ratings.png`,
-    search_data: `/libraries/workflow-engine/assets/workflow/search-data.svg`,
-    appetite_tolerance: `/libraries/configure-widget/assets/images/appetite-tolerance.png`,
-    inherent_trend: `/libraries/configure-widget/assets/images/inherent-trend.png`,
-    residual_trend: `/libraries/configure-widget/assets/images/residual-trend.png`,
-    risk_trend: `/libraries/configure-widget/assets/images/risk-trend.png`,
-    policyApproverView: `/policy/images/policy-approver-view.svg`,
+    dashBoardIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/what.svg`,
+    dashBoardUsersIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/who.svg`,
+    dashBoardRcIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
+    dashBoardProgramIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
+    dashBoardRiskIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
+    dashBoardTimeFrameIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/when.svg`,
+    dashBoardEmailSummariesIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
+    configure_widget: `${BASE_URL}/libraries/configure-widget/assets/images/configure-widget.svg`,
+    overviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/overview.png`,
+    responsibilityCalenderWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-calender.png`,
+    responsibilityCenterOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-center-overview.png`,
+    myResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/my-responsibilities.png`,
+    keyResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/key-responsibilities.png`,
+    trendAnalysisWidget: `${BASE_URL}/libraries/configure-widget/assets/images/trend-analysis.png`,
+    workroomUpdatesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/workroom-updates.png`,
+    recentActivitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/recent-activities.png`,
+    exceptionSummaryWidget: `${BASE_URL}/libraries/configure-widget/assets/images/exception-summary.png`,
+    riskOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-overview.png`,
+    appetiteToleranceWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png`,
+    inherentRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-RC.png`,
+    residualRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-RC.png`,
+    riskCategoryOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png`,
+    riskHeatmapWidget: `${BASE_URL}/libraries/configure-widget/assets/images/risk-heatmap.png`,
+    inherentCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-categories.png`,
+    residualCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-categories.png`,
+    tenRiskRatingsWidget: `${BASE_URL}/libraries/configure-widget/assets/images/10-risk-ratings.png`,
+    search_data: `${BASE_URL}/libraries/workflow-engine/assets/workflow/search-data.svg`,
+    appetite_tolerance: `${BASE_URL}/libraries/configure-widget/assets/images/appetite-tolerance.png`,
+    inherent_trend: `${BASE_URL}/libraries/configure-widget/assets/images/inherent-trend.png`,
+    residual_trend: `${BASE_URL}/libraries/configure-widget/assets/images/residual-trend.png`,
+    risk_trend: `${BASE_URL}/libraries/configure-widget/assets/images/risk-trend.png`,
+    policyApproverView: `${BASE_URL}/policy/images/policy-approver-view.svg`,
 };
 class Configurations {
@@ -831,67 +831,54 @@ class PopoverComponent {
         this.getPosition();
     }
     getPosition() {
-        // setTimeout(() => {
-        const elementPositionn = this.popoverService.elementPosition;
+        const elementPosition = this.popoverService?.elementPosition;
+        const direction = this.popoverService?.elementDirection;
+        if (!this.popoverRatio?.nativeElement) {
+            return;
+        }
         this.popoverHeight = this.popoverRatio.nativeElement.offsetHeight;
         this.popoverWidth = this.popoverRatio.nativeElement.offsetWidth;
-        if (this.popoverService.elementDirection === 'left') {
-            this.leftValue = elementPositionn.left;
-            if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-            else {
-                this.topValue = elementPositionn.top + elementPositionn.height;
-            }
-        }
-        if (this.popoverService.elementDirection === 'right') {
-            this.leftValue = elementPositionn.left + elementPositionn.width - this.popoverWidth;
-            if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-            else {
-                this.topValue = elementPositionn.top + elementPositionn.height;
-            }
-        }
-        if (this.popoverService.elementDirection === 'top') {
-            this.leftValue = elementPositionn.left + elementPositionn.width;
-            if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-            else {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-        }
-        if (this.popoverService.elementDirection === 'bottom') {
-            this.leftValue = elementPositionn.left + elementPositionn.width;
-            if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-            else {
-                this.topValue = elementPositionn.top + elementPositionn.height;
-            }
-        }
-        if (this.popoverService.elementDirection === 'self-position') {
-            this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-            this.topValue = elementPositionn.top - 15;
-        }
-        if (this.popoverService.elementDirection === 'top-center') {
-            this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-            // this.topValue = elementPositionn.top - this.popoverHeight;
-            if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight) {
-                this.topValue = elementPositionn.top + elementPositionn.height;
-            }
-            else {
-                this.topValue = elementPositionn.top - this.popoverHeight;
-            }
-        }
-        if (this.popoverService.elementDirection === 'center') {
-            this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-            this.topValue = elementPositionn.top + elementPositionn.height;
+        const overflowsBottom = elementPosition.top + elementPosition.height + this.popoverHeight > window.outerHeight - 200;
+        switch (direction) {
+            case 'left':
+                this.leftValue = elementPosition.left;
+                this.topValue = overflowsBottom
+                    ? elementPosition.top - this.popoverHeight
+                    : elementPosition.top + elementPosition.height;
+                break;
+            case 'right':
+                this.leftValue = elementPosition.left + elementPosition.width - this.popoverWidth;
+                this.topValue = overflowsBottom
+                    ? elementPosition.top - this.popoverHeight
+                    : elementPosition.top + elementPosition.height;
+                break;
+            case 'top':
+                this.leftValue = elementPosition.left + elementPosition.width;
+                this.topValue = elementPosition.top - this.popoverHeight;
+                break;
+            case 'bottom':
+                this.leftValue = elementPosition.left + elementPosition.width;
+                this.topValue = overflowsBottom
+                    ? elementPosition.top - this.popoverHeight
+                    : elementPosition.top + elementPosition.height;
+                break;
+            case 'self-position':
+                this.leftValue = elementPosition.left + elementPosition.width / 2 - this.popoverWidth / 2;
+                this.topValue = elementPosition.top - 15;
+                break;
+            case 'top-center':
+                this.leftValue = elementPosition.left + elementPosition.width / 2 - this.popoverWidth / 2;
+                this.topValue = (elementPosition.top + elementPosition.height + this.popoverHeight > window.outerHeight)
+                    ? elementPosition.top + elementPosition.height
+                    : elementPosition.top - this.popoverHeight;
+                break;
+            case 'center':
+                this.leftValue = elementPosition.left + elementPosition.width / 2 - this.popoverWidth / 2;
+                this.topValue = elementPosition.top + elementPosition.height;
+                break;
         }
         this.positionX = this.leftValue;
         this.positionY = this.topValue;
-        // }, 10);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, selector: "app-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -2408,11 +2395,11 @@ class UserListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
+            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        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\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        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\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            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\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            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\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
@@ -3299,7 +3286,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
-dayjs.extend(LocalizedFormat);
 class CreateDashboardComponent {
     createDashboardService;
     paginationService;
@@ -3803,7 +3789,7 @@ class CreateDashboardComponent {
         else if (this.mode === 'EDIT') {
             const widgetsArray = [];
             data.forEach((element) => {
-                if (!JSON.stringify(this.dashboardForm.configureWidget).includes(element.id)) {
+                if (!this.extractWidgetCodes(this.dashboardForm.configureWidget).includes(element.id)) {
                     let obj = {};
                     obj.module_name = element.module;
                     obj._id = '';
@@ -3856,6 +3842,15 @@ class CreateDashboardComponent {
         this.openConfigureWidgets = false;
         this.submitDashboard();
     }
+    extractWidgetCodes(widgets) {
+        const widgetCodes = [];
+        widgets?.forEach((widget) => {
+            if (widget?.widget_code) {
+                widgetCodes.push(widget?.widget_code);
+            }
+        });
+        return widgetCodes;
+    }
     closeConfigureWidgets(event) {
         this.openConfigureWidgets = event;
     }
@@ -4320,6 +4315,16 @@ class CreateDashboardComponent {
             });
         });
     }
+    getElementClassName(el) {
+        if (!el)
+            return '';
+        if (typeof el?.className === 'string')
+            return el?.className;
+        if (typeof el?.className === 'object' && 'baseVal' in el?.className) {
+            return el?.className?.baseVal;
+        }
+        return '';
+    }
     documentClick(event) {
         const targetElement = event?.target;
         const fromDateInputElement = document.getElementById(this.openedDatePicker.toLowerCase()) || null;
@@ -4335,7 +4340,8 @@ class CreateDashboardComponent {
         const selectedDatePicker = this.openedDatePicker === 'FROM_DATE'
             ? this.fromDatePicker
             : this.toDatePicker;
-        const isNotCalendarMonth = !targetElement.className.includes('dp-calendar-month');
+        const className = this.getElementClassName(targetElement);
+        const isNotCalendarMonth = !className?.includes('dp-calendar-month');
         if (isOutsideFromDateInput &&
             isNotFromDateElement &&
             isNotInsideCalendar &&
@@ -5404,47 +5410,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
-class ConfigureBaseUrlService {
-    ASSETS = ASSETS;
-    env;
-    constructor(config) {
-        if (config) {
-            this.env = config?.envConfig;
-        }
-    }
-    updateBaseUrl() {
-        Object.keys(this.ASSETS).forEach((key) => {
-            this.ASSETS[key] = `${this.env?.cdnUrl}${this.ASSETS[key]}`;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
-                    type: Optional
-                }] }]; } });
 class CreateDashboardModule {
-    configureBaseUrlService;
-    constructor(configureBaseUrlService) {
-        this.configureBaseUrlService = configureBaseUrlService;
-        this.setBaseUrl();
-    }
     static forRoot(environmentConfig) {
         return {
             ngModule: CreateDashboardModule,
             providers: [{ provide: Configurations, useValue: environmentConfig }],
         };
     }
-    setBaseUrl() {
-        this.configureBaseUrlService.updateBaseUrl();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [{ token: ConfigureBaseUrlService }], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
             UserListComponent,
             FormGroupComponent,
@@ -5528,7 +5501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     exports: [CreateDashboardComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: ConfigureBaseUrlService }]; } });
+        }] });
 /*
  * Public API Surface of create-dashboard