vc-create-dashboard 3.0.70 → 3.0.72

package/fesm2022/vc-create-dashboard.mjs

@@ -1,6 +1,7 @@
 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';
@@ -48,40 +49,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-const BASE_URL = 'https://cdn.v-comply.com';
 const ASSETS = {
-    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`,
+    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`,
 };
 
 class Configurations {
@@ -346,73 +346,82 @@ class ConfigureWidgetsService {
             this.env = config.envConfig;
         }
     }
-    complianceWidgetsData = [
-        {
-            title: 'Overview',
-            id: 'overview_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.overviewWidget,
-            value: 0,
-        },
-        {
-            title: 'Responsibility Calendar',
-            id: 'compliance_calendar_flag',
-            description: 'Displays all responsibilities that are due on a particular day.',
-            widgetImage: ASSETS.responsibilityCalenderWidget,
-            value: 0,
-        },
-        {
-            title: 'Responsibility Center Overview',
-            id: 'responsibility_center_overview_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.overviewWidget,
-            value: 0,
-        },
-        {
-            title: 'My Responsibilities',
-            id: 'my_responsibilities',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.myResponsibilitiesWidget,
-            tabOption: true,
-            value: 0,
-        },
-        {
-            title: 'Key Responsibilities',
-            id: 'key_responsibilities',
-            description: 'Displays all responsibilities that are due on a particular day.',
-            widgetImage: ASSETS.keyResponsibilitiesWidget,
-            tabOption: true,
-            value: 0,
-        },
-        {
-            title: 'Trend Analysis',
-            id: 'trend_analysis_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.trendAnalysisWidget,
-            value: 0,
-        },
-        {
-            title: 'Workroom Updates',
-            id: 'workroom_alert_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.workroomUpdatesWidget,
-            value: 0,
-        },
-        {
-            title: 'Recent Activities',
-            id: 'recent_activity_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.recentActivitiesWidget,
-            value: 0,
-        },
-        {
-            title: 'Exception Summary',
-            id: 'exception_summary_flag',
-            description: 'Displays all responsibilities that have been assigned to you.',
-            widgetImage: ASSETS.exceptionSummaryWidget,
-            value: 0,
-        },
-    ];
+    // complianceWidgetsData = [
+    //   {
+    //     title: 'Overview',
+    //     id: 'overview_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.overviewWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Responsibility Calendar',
+    //     id: 'compliance_calendar_flag',
+    //     description:
+    //       'Displays all responsibilities that are due on a particular day.',
+    //     widgetImage: ASSETS.responsibilityCalenderWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Responsibility Center Overview',
+    //     id: 'responsibility_center_overview_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.overviewWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'My Responsibilities',
+    //     id: 'my_responsibilities',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.myResponsibilitiesWidget,
+    //     tabOption: true,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Key Responsibilities',
+    //     id: 'key_responsibilities',
+    //     description:
+    //       'Displays all responsibilities that are due on a particular day.',
+    //     widgetImage: ASSETS.keyResponsibilitiesWidget,
+    //     tabOption: true,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Trend Analysis',
+    //     id: 'trend_analysis_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.trendAnalysisWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Workroom Updates',
+    //     id: 'workroom_alert_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.workroomUpdatesWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Recent Activities',
+    //     id: 'recent_activity_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.recentActivitiesWidget,
+    //     value: 0,
+    //   },
+    //   {
+    //     title: 'Exception Summary',
+    //     id: 'exception_summary_flag',
+    //     description:
+    //       'Displays all responsibilities that have been assigned to you.',
+    //     widgetImage: ASSETS.exceptionSummaryWidget,
+    //     value: 0,
+    //   },
+    // ];
     riskWidgetsData = [
         {
             title: 'Risk Overview',
@@ -538,11 +547,10 @@ class ConfigureWidgetsService {
             .pipe(retry(2));
     }
     moduleType(identifier) {
-        if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
-            return 'COMPLIANCE';
-        }
-        else if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
+        if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
             return 'RISK';
+            // } else if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
+            //   return 'COMPLIANCE';
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -823,54 +831,67 @@ class PopoverComponent {
         this.getPosition();
     }
     getPosition() {
-        const elementPosition = this.popoverService?.elementPosition;
-        const direction = this.popoverService?.elementDirection;
-        if (!this.popoverRatio?.nativeElement) {
-            return;
-        }
+        // setTimeout(() => {
+        const elementPositionn = this.popoverService.elementPosition;
         this.popoverHeight = this.popoverRatio.nativeElement.offsetHeight;
         this.popoverWidth = this.popoverRatio.nativeElement.offsetWidth;
-        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;
+        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;
         }
         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"] }] });
@@ -1159,26 +1180,25 @@ class ConfigureWidgetsComponent {
             this.complianceWidgetsDisplayCount = 0;
             const finalData = [...new Set(this.displayedWidgets)];
             finalData.forEach((element, index) => {
-                this.widgetsList.COMPLIANCE.forEach((ele) => {
-                    if (ele.id == element.widget_code) {
-                        ele.visibility = true;
-                        if (ele.subWidgets.length > 0) {
-                            const filterData = [];
-                            element.sub_widgets.filter((subwidget) => {
-                                filterData.push(subwidget.widget_code);
-                            });
-                            ele.subWidgets.forEach((subElement, subIndex) => {
-                                if (filterData.includes(subElement.id)) {
-                                    ele.subWidgets[subIndex].visibility = true;
-                                }
-                                else {
-                                    ele.subWidgets[subIndex].visibility = false;
-                                }
-                            });
-                        }
-                        this.complianceWidgetsDisplayCount++;
-                    }
-                });
+                // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+                //   if (ele.id == element.widget_code) {
+                //     ele.visibility = true;
+                //     if (ele.subWidgets.length > 0) {
+                //       const filterData: any = [];
+                //       element.sub_widgets.filter((subwidget: any) => {
+                //         filterData.push(subwidget.widget_code);
+                //       });
+                //       ele.subWidgets.forEach((subElement: any, subIndex: number) => {
+                //         if (filterData.includes(subElement.id)) {
+                //           ele.subWidgets[subIndex].visibility = true;
+                //         } else {
+                //           ele.subWidgets[subIndex].visibility = false;
+                //         }
+                //       });
+                //     }
+                //     this.complianceWidgetsDisplayCount++;
+                //   }
+                // });
                 this.widgetsList.RISK.forEach((ele) => {
                     if (ele.id == element.widget_code) {
                         ele.visibility = true;
@@ -1203,28 +1223,27 @@ class ConfigureWidgetsComponent {
         }
         const data = [...new Set(this.selectedWidgetsData)];
         data.forEach((element, index) => {
-            this.widgetsList.COMPLIANCE.forEach((ele) => {
-                if (ele.id == element.widget_code && element.state == 'ACTIVE') {
-                    ele.value = true;
-                    if (ele.subWidgets.length > 0) {
-                        const filterData = [];
-                        element.sub_widgets.filter((subwidget) => {
-                            if (subwidget.state == 'ACTIVE') {
-                                filterData.push(subwidget.widget_code);
-                            }
-                        });
-                        ele.subWidgets.forEach((subElement, subIndex) => {
-                            if (filterData.includes(subElement.id)) {
-                                ele.subWidgets[subIndex].value = true;
-                            }
-                            else {
-                                ele.subWidgets[subIndex].value = false;
-                            }
-                        });
-                    }
-                    this.selectedWidgets.push(ele);
-                }
-            });
+            // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+            //   if (ele.id == element.widget_code && element.state == 'ACTIVE') {
+            //     ele.value = true;
+            //     if (ele.subWidgets.length > 0) {
+            //       const filterData: any = [];
+            //       element.sub_widgets.filter((subwidget: any) => {
+            //         if (subwidget.state == 'ACTIVE') {
+            //           filterData.push(subwidget.widget_code);
+            //         }
+            //       });
+            //       ele.subWidgets.forEach((subElement: any, subIndex: number) => {
+            //         if (filterData.includes(subElement.id)) {
+            //           ele.subWidgets[subIndex].value = true;
+            //         } else {
+            //           ele.subWidgets[subIndex].value = false;
+            //         }
+            //       });
+            //     }
+            //     this.selectedWidgets.push(ele);
+            //   }
+            // });
             this.widgetsList.RISK.forEach((ele) => {
                 if (ele.id == element.widget_code && element.state == 'ACTIVE') {
                     ele.value = true;
@@ -1253,144 +1272,153 @@ class ConfigureWidgetsComponent {
     }
     ngOnInit() { }
     widgetsList = {
-        COMPLIANCE: [
-            {
-                title: 'Overview',
-                id: 'overview',
-                description: 'Overview shows the performance of responsibilities and Programs.',
-                widgetImage: ASSETS.overviewWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Responsibility Calendar',
-                id: 'compliance_calendar_flag',
-                description: 'The Responsibility Calendar shows the due dates of responsibilities in a calendar format. The responsibilities are color coded to reflect the status of the responsibilities.',
-                widgetImage: ASSETS.responsibilityCalenderWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Responsibility Center Overview',
-                id: 'responsibility_center_overview_flag',
-                description: 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
-                widgetImage: ASSETS.responsibilityCenterOverviewWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Responsibilities',
-                id: 'my_responsibilities',
-                description: 'This widget shows the performance of the responsibilities that you are required to complete, the responsibilities that you are reviewing and the responsibilities that you are overseeing.',
-                widgetImage: ASSETS.myResponsibilitiesWidget,
-                tabOption: true,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [
-                    {
-                        title: 'My Responsibilities',
-                        id: 'my_responsibility_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                    {
-                        title: 'I’m Reviewing',
-                        id: 'reviewer_responsibility_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                    {
-                        title: 'I’m Overseeing',
-                        id: 'cc_responsibility_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                ],
-            },
-            {
-                title: 'Key Responsibilities',
-                id: 'key_responsibilities',
-                description: 'This widget shows the performance of key responsibilities that you are required to complete, that you are reviewing, that you are overseeing and that you have assigned to another person.',
-                widgetImage: ASSETS.keyResponsibilitiesWidget,
-                tabOption: true,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [
-                    {
-                        title: 'Overview',
-                        id: 'key_responsibilities_overview_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                    {
-                        title: 'My Responsibilities',
-                        id: 'key_my_responsibilities_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                    {
-                        title: 'I’m Reviewing',
-                        id: 'key_i_am_reviewing_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                    {
-                        title: 'I’m Overseeing',
-                        id: 'key_i_am_overseeing_flag',
-                        value: false,
-                        visibility: true,
-                    },
-                ],
-            },
-            {
-                title: 'Trend Analysis',
-                id: 'trend_analysis_flag',
-                description: 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
-                widgetImage: ASSETS.trendAnalysisWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Workroom Updates',
-                id: 'workroom_alert_flag',
-                description: 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
-                widgetImage: ASSETS.workroomUpdatesWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Recent Activities',
-                id: 'recent_activity_flag',
-                description: 'This is a chronological view of the recent updates of responsibilities.',
-                widgetImage: ASSETS.recentActivitiesWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Exception Summary',
-                id: 'exception_summary_flag',
-                description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
-                widgetImage: ASSETS.exceptionSummaryWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-        ],
+        // COMPLIANCE: [
+        //   {
+        //     title: 'Overview',
+        //     id: 'overview',
+        //     description:
+        //       'Overview shows the performance of responsibilities and Programs.',
+        //     widgetImage: ASSETS.overviewWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Responsibility Calendar',
+        //     id: 'compliance_calendar_flag',
+        //     description:
+        //       'The Responsibility Calendar shows the due dates of responsibilities in a calendar format. The responsibilities are color coded to reflect the status of the responsibilities.',
+        //     widgetImage: ASSETS.responsibilityCalenderWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Responsibility Center Overview',
+        //     id: 'responsibility_center_overview_flag',
+        //     description:
+        //       'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
+        //     widgetImage: ASSETS.responsibilityCenterOverviewWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Responsibilities',
+        //     id: 'my_responsibilities',
+        //     description:
+        //       'This widget shows the performance of the responsibilities that you are required to complete, the responsibilities that you are reviewing and the responsibilities that you are overseeing.',
+        //     widgetImage: ASSETS.myResponsibilitiesWidget,
+        //     tabOption: true,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [
+        //       {
+        //         title: 'My Responsibilities',
+        //         id: 'my_responsibility_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //       {
+        //         title: 'I’m Reviewing',
+        //         id: 'reviewer_responsibility_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //       {
+        //         title: 'I’m Overseeing',
+        //         id: 'cc_responsibility_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //     ],
+        //   },
+        //   {
+        //     title: 'Key Responsibilities',
+        //     id: 'key_responsibilities',
+        //     description:
+        //       'This widget shows the performance of key responsibilities that you are required to complete, that you are reviewing, that you are overseeing and that you have assigned to another person.',
+        //     widgetImage: ASSETS.keyResponsibilitiesWidget,
+        //     tabOption: true,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [
+        //       {
+        //         title: 'Overview',
+        //         id: 'key_responsibilities_overview_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //       {
+        //         title: 'My Responsibilities',
+        //         id: 'key_my_responsibilities_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //       {
+        //         title: 'I’m Reviewing',
+        //         id: 'key_i_am_reviewing_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //       {
+        //         title: 'I’m Overseeing',
+        //         id: 'key_i_am_overseeing_flag',
+        //         value: false,
+        //         visibility: true,
+        //       },
+        //     ],
+        //   },
+        //   {
+        //     title: 'Trend Analysis',
+        //     id: 'trend_analysis_flag',
+        //     description:
+        //       'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
+        //     widgetImage: ASSETS.trendAnalysisWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Workroom Updates',
+        //     id: 'workroom_alert_flag',
+        //     description:
+        //       'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
+        //     widgetImage: ASSETS.workroomUpdatesWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Recent Activities',
+        //     id: 'recent_activity_flag',
+        //     description:
+        //       'This is a chronological view of the recent updates of responsibilities.',
+        //     widgetImage: ASSETS.recentActivitiesWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        //   {
+        //     title: 'Exception Summary',
+        //     id: 'exception_summary_flag',
+        //     description:
+        //       'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
+        //     widgetImage: ASSETS.exceptionSummaryWidget,
+        //     value: false,
+        //     visibility: true,
+        //     module: 'COMPLIANCE',
+        //     subWidgets: [],
+        //   },
+        // ],
         RISK: [
             {
                 title: 'Risk Overview',
@@ -1547,7 +1575,9 @@ class ConfigureWidgetsComponent {
             },
         ],
     };
-    selectWidget(event, module, widgetId, subWidgetId) {
+    selectWidget(event, 
+    //module: 'COMPLIANCE' | 'RISK',
+    module, widgetId, subWidgetId) {
         const widgetIndex = this.widgetsList[module].findIndex((ele) => ele.id == widgetId);
         const isSubWidgetAddable = this.selectedWidgets.findIndex((widget) => widget.id === widgetId);
         if (event) {
@@ -1595,11 +1625,11 @@ class ConfigureWidgetsComponent {
     }
     setSelectedWidgets() {
         this.selectedWidgets = [];
-        this.widgetsList.COMPLIANCE.forEach((ele) => {
-            if (ele.value) {
-                this.selectedWidgets.push(ele);
-            }
-        });
+        // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+        //   if (ele.value) {
+        //     this.selectedWidgets.push(ele);
+        //   }
+        // });
         this.widgetsList.RISK.forEach((ele) => {
             if (ele.value) {
                 this.selectedWidgets.push(ele);
@@ -1623,14 +1653,14 @@ class ConfigureWidgetsComponent {
         this.closeConfigureWidgets.emit(false);
     }
     setWidgetsVisibilityToFalse() {
-        this.widgetsList.COMPLIANCE.forEach((ele) => {
-            ele.visibility = false;
-            if (ele.subWidgets.length > 0) {
-                ele.subWidgets.forEach((subElement) => {
-                    subElement.visibility = false;
-                });
-            }
-        });
+        // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+        //   ele.visibility = false;
+        //   if (ele.subWidgets.length > 0) {
+        //     ele.subWidgets.forEach((subElement: any) => {
+        //       subElement.visibility = false;
+        //     });
+        //   }
+        // });
         this.widgetsList.RISK.forEach((ele) => {
             ele.visibility = false;
             if (ele.subWidgets.length > 0) {
@@ -1641,11 +1671,11 @@ class ConfigureWidgetsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"widget?.title\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"widget?.description\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"widget?.widgetImage\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/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 .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\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: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { 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: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <!-- <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button> -->\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"widget?.title\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"widget?.description\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"widget?.widgetImage\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/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 .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\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: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { 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: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"widget?.title\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"widget?.description\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"widget?.widgetImage\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/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 .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
+            args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n  <div\n    class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n      Configure Widgets\n    </div>\n    <button\n      class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n      (click)=\"closeConfigureDashboard()\"\n    >\n      <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n    </button>\n  </div>\n  <div class=\"configure-widgets-body\">\n    <div class=\"configure-widgets-tab\">\n      <ul>\n        <li\n          [class.active]=\"module === 'COMPLIANCE'\"\n          *ngIf=\"showCompliance\"\n          (click)=\"module = 'COMPLIANCE'\"\n        >\n          <!-- <button>\n            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n          </button> -->\n        </li>\n        <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n          <button (click)=\"module = 'RISK'\">\n            Risks<span>{{ riskWidgetsDisplayCount }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"configure-widgets-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n    </div>\n    <div\n      class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n      *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n    >\n      <ng-container\n        *ngFor=\"let widget of widgetsList[module] | search : search\"\n      >\n        <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n          <label class=\"block\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"widget.value\"\n              (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n            />\n            <div class=\"check-icon\">\n              <svg\n                class=\"check\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"check-circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"check-circle\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"configure-widgets-item-head\">\n              <h4\n                class=\"configure-widgets-item-title\"\n                [innerHTML]=\"widget?.title\"\n              ></h4>\n              <p\n                class=\"configure-widgets-item-description\"\n                [innerHTML]=\"widget?.description\"\n              ></p>\n              <button\n                *ngIf=\"!widget.value\"\n                class=\"configure-widgets-item-button add\"\n                (click)=\"selectWidget(true, module, widget.id)\"\n              >\n                + ADD\n              </button>\n              <button\n                *ngIf=\"widget.value\"\n                class=\"configure-widgets-item-button remove\"\n                (click)=\"selectWidget(false, module, widget.id)\"\n              >\n                - Remove\n              </button>\n            </div>\n            <div class=\"configure-widgets-item-body\">\n              <div class=\"image-wrapper\">\n                <img\n                  [ngSrc]=\"widget?.widgetImage\"\n                  alt=\"\"\n                  width=\"790\"\n                  height=\"613\"\n                />\n              </div>\n              <div\n                class=\"floating-option vx-d-flex\"\n                *ngIf=\"widget?.subWidgets?.length > 0\"\n              >\n                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n                  <app-cs-checkbox\n                    *ngIf=\"subWidget.visibility\"\n                    (ngValueChange)=\"\n                      selectWidget($event, module, widget.id, subWidget.id)\n                    \"\n                    [ngValue]=\"subWidget.value\"\n                    >{{ subWidget.title }}\n                  </app-cs-checkbox>\n                </ng-container>\n              </div>\n            </div>\n          </label>\n        </div>\n      </ng-container>\n\n      <!-- No Data Image -->\n    </div>\n    <app-no-data\n      *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n      [noDataImage]=\"ASSETS.configure_widget\"\n      [noDataText]=\"'No data to display'\"\n    >\n    </app-no-data>\n\n    <floating-bar\n      (submitEvent)=\"onNextClick()\"\n      (cancelEvent)=\"closeConfigureDashboard()\"\n      [selectedData]=\"selectedWidgets\"\n      (deleteEvent)=\"removeWidget($event)\"\n    ></floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/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 .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
         }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
                 type: Output
             }], closeConfigureWidgets: [{
@@ -2378,11 +2408,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                  (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"] }] });
+    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"] }] });
 }
 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                  (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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
@@ -3269,6 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+dayjs.extend(LocalizedFormat);
 class CreateDashboardComponent {
     createDashboardService;
     paginationService;
@@ -3772,7 +3803,7 @@ class CreateDashboardComponent {
         else if (this.mode === 'EDIT') {
             const widgetsArray = [];
             data.forEach((element) => {
-                if (!this.extractWidgetCodes(this.dashboardForm.configureWidget).includes(element.id)) {
+                if (!JSON.stringify(this.dashboardForm.configureWidget).includes(element.id)) {
                     let obj = {};
                     obj.module_name = element.module;
                     obj._id = '';
@@ -3825,15 +3856,6 @@ 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;
     }
@@ -4298,16 +4320,6 @@ 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;
@@ -4323,8 +4335,7 @@ class CreateDashboardComponent {
         const selectedDatePicker = this.openedDatePicker === 'FROM_DATE'
             ? this.fromDatePicker
             : this.toDatePicker;
-        const className = this.getElementClassName(targetElement);
-        const isNotCalendarMonth = !className?.includes('dp-calendar-month');
+        const isNotCalendarMonth = !targetElement.className.includes('dp-calendar-month');
         if (isOutsideFromDateInput &&
             isNotFromDateElement &&
             isNotInsideCalendar &&
@@ -4342,11 +4353,11 @@ class CreateDashboardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n    [class.animate-slideInRight]=\"animation\"\n  >\n    <div\n      class=\"more-option\"\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-user-list\n        *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n        (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\"\n        [totalList]=\"totalList\"\n        [listDetails]=\"listDetails\"\n        [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"\n      ></app-user-list>\n      <app-responsibility-center\n        *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\"\n        [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \"\n        [rcIdKey]=\"'item_id'\"\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\"\n      >\n      </app-responsibility-center>\n      <app-categories\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\"\n        [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-categories>\n      <app-risk-categories\n        *ngIf=\"activeSelector === 'riskCategories'\"\n        [categoryList]=\"riskCategoryList\"\n        [allCategories]=\"allRiskCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-risk-categories>\n\n      <app-frequency\n        *ngIf=\"activeSelector === 'frequency'\"\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\n        (saveFrequency)=\"saveFrequency($event)\"\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n        [selectedDate]=\"dashboardForm.frequencyDate\"\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n      >\n      </app-frequency>\n    </div>\n    <div\n      class=\"vx-dialog-container side-dialog\"\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div\n          class=\"vx-dialog-body-container\"\n          (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\n        >\n          <!-- Dashboard Name -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardIcon\"\n                *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Dashboard Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div class=\"vx-input-group\">\n                  <input\n                    class=\"textField\"\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\n                    (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\"\n                    (focusout)=\"activateSelector('name', false)\"\n                  />\n\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \"\n                >\n                  {{\n                    dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor\n                    [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n                  ></vcomply-editor>\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n                    >{{\n                      250 -\n                        (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \"\n                >\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Who -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'whoCanView'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Who can view this dashboard?<span\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                      *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \"\n                    >\n                      <i\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \"\n                        (click)=\"remove('whoCanView', user)\"\n                        >&#xe9ae;</i\n                      >\n                      <span\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                        >{{ user.member_name }}</span\n                      >\n                      <button\n                        *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userList.popover()\"\n                        placement=\"left\"\n                      >\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"user?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \"\n                                  (click)=\"remove('whoCanView', user)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER(S)</span\n                      >\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                      >\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n                      *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \"\n                      >&</span\n                    >\n                    <div\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\n                      id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER GROUP(S)</span\n                      >\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"groupCount.popover()\"\n                        placement=\"right\"\n                      >\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \"\n                                  (click)=\"remove('whoCanView', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.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 data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.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)=\"remove('whoCanViewGroup', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'rcList'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RESPONSIBILITY CENTER(S)</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('rc', rc)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rc.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rc.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rcList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                          .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rc?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('rc', rc)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >PROGRAM</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rCategory.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCategories\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rCategoryList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\n                          1\n                        ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rCategory?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \"\n                                  >&#xe90d;</i\n                                >\n                                {{ rCategory?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Risk Category -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RISK CATEGORIES</label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ riskCategory.category_name }}</span\n                    >\n                    <button\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"riskList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"riskCategory?.category_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('riskCategory', riskCategory)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('riskCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Display Criteria -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >DISPLAY CRITERIA</label\n                >\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n                  >\n                    Those Items that have been assigned to either the selected\n                    Responsibility Center(s) or the selected\n                    Categories.</app-cs-radio\n                  >\n\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n                  >\n                    Those Items that have been assigned to both the selected\n                    Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeframe -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \"\n                [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >TIMEFRAME</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label\n                >\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"from_date\"\n                      [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'From'\"\n                      (click)=\"openFromDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #fromDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"fromDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeFromDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                  <div\n                    class=\"date-select\"\n                    *ngIf=\"!hideToDate\"\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n                  >\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"to_date\"\n                      [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'To'\"\n                      (click)=\"openToDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #toDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"toDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeToDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                </div>\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \"\n                >\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-block\">\n          <button\n            class=\"vx-btn block primary\"\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\"\n          >\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button\n        class=\"close-dialog\"\n        type=\"button\"\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\"\n        [arTooltip]=\"'[Esc] to close'\"\n        placement=\"left\"\n        type=\"black\"\n        delay=\"0\"\n        [tooltipMandatory]=\"true\"\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n      >\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div\n        class=\"global-confirmation-alert\"\n        *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\n          dashboardForm?.selectedRiskCategories?.length == 0\n        \"\n      >\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center, Program or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center or Program.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog\n  *ngIf=\"isSmiley\"\n  [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n  *ngIf=\"openConfigureWidgets\"\n  [mode]=\"mode\"\n  [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\"\n  [showCompliance]=\"showComplianceWidgets\"\n  [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@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/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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-right.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/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-right.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\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: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { 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: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { 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: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n    [class.animate-slideInRight]=\"animation\"\n  >\n    <div\n      class=\"more-option\"\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-user-list\n        *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n        (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\"\n        [totalList]=\"totalList\"\n        [listDetails]=\"listDetails\"\n        [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"\n      ></app-user-list>\n      <app-responsibility-center\n        *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\"\n        [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \"\n        [rcIdKey]=\"'item_id'\"\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\"\n      >\n      </app-responsibility-center>\n      <app-categories\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\"\n        [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-categories>\n      <app-risk-categories\n        *ngIf=\"activeSelector === 'riskCategories'\"\n        [categoryList]=\"riskCategoryList\"\n        [allCategories]=\"allRiskCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-risk-categories>\n\n      <app-frequency\n        *ngIf=\"activeSelector === 'frequency'\"\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\n        (saveFrequency)=\"saveFrequency($event)\"\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n        [selectedDate]=\"dashboardForm.frequencyDate\"\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n      >\n      </app-frequency>\n    </div>\n    <div\n      class=\"vx-dialog-container side-dialog\"\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div\n          class=\"vx-dialog-body-container\"\n          (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\n        >\n          <!-- Dashboard Name -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardIcon\"\n                *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Dashboard Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div class=\"vx-input-group\">\n                  <input\n                    class=\"textField\"\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\n                    (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\"\n                    (focusout)=\"activateSelector('name', false)\"\n                  />\n\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \"\n                >\n                  {{\n                    dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor\n                    [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n                  ></vcomply-editor>\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n                    >{{\n                      250 -\n                        (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \"\n                >\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Who -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'whoCanView'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Who can view this dashboard?<span\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                      *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \"\n                    >\n                      <i\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \"\n                        (click)=\"remove('whoCanView', user)\"\n                        >&#xe9ae;</i\n                      >\n                      <span\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                        >{{ user.member_name }}</span\n                      >\n                      <button\n                        *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userList.popover()\"\n                        placement=\"left\"\n                      >\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"user?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \"\n                                  (click)=\"remove('whoCanView', user)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER(S)</span\n                      >\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                      >\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n                      *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \"\n                      >&</span\n                    >\n                    <div\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\n                      id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER GROUP(S)</span\n                      >\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"groupCount.popover()\"\n                        placement=\"right\"\n                      >\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \"\n                                  (click)=\"remove('whoCanView', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.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 data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.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)=\"remove('whoCanViewGroup', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'rcList'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RESPONSIBILITY CENTER(S)</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('rc', rc)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rc.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rc.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rcList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                          .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rc?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('rc', rc)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >PROGRAM</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rCategory.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCategories\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rCategoryList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\n                          1\n                        ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rCategory?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \"\n                                  >&#xe90d;</i\n                                >\n                                {{ rCategory?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- Risk Category -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RISK CATEGORIES</label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ riskCategory.category_name }}</span\n                    >\n                    <button\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"riskList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"riskCategory?.category_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('riskCategory', riskCategory)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('riskCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Display Criteria -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >DISPLAY CRITERIA</label\n                >\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n                  >\n                    Those Items that have been assigned to either the selected\n                    Responsibility Center(s) or the selected\n                    Categories.</app-cs-radio\n                  >\n\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n                  >\n                    Those Items that have been assigned to both the selected\n                    Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeframe -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \"\n                [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >TIMEFRAME</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label\n                >\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"from_date\"\n                      [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'From'\"\n                      (click)=\"openFromDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #fromDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"fromDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeFromDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                  <div\n                    class=\"date-select\"\n                    *ngIf=\"!hideToDate\"\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n                  >\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"to_date\"\n                      [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'To'\"\n                      (click)=\"openToDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #toDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"toDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeToDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                </div>\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \"\n                >\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-block\">\n          <button\n            class=\"vx-btn block primary\"\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\"\n          >\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button\n        class=\"close-dialog\"\n        type=\"button\"\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\"\n        [arTooltip]=\"'[Esc] to close'\"\n        placement=\"left\"\n        type=\"black\"\n        delay=\"0\"\n        [tooltipMandatory]=\"true\"\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n      >\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div\n        class=\"global-confirmation-alert\"\n        *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n          dashboardForm?.selectedRiskCategories?.length == 0\n        \"\n      >\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog\n  *ngIf=\"isSmiley\"\n  [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n  *ngIf=\"openConfigureWidgets\"\n  [mode]=\"mode\"\n  [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\"\n  [showCompliance]=\"!showComplianceWidgets\"\n  [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@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/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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-right.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/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-right.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\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: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { 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: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { 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: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n    [class.animate-slideInRight]=\"animation\"\n  >\n    <div\n      class=\"more-option\"\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-user-list\n        *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n        (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\"\n        [totalList]=\"totalList\"\n        [listDetails]=\"listDetails\"\n        [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"\n      ></app-user-list>\n      <app-responsibility-center\n        *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\"\n        [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \"\n        [rcIdKey]=\"'item_id'\"\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\"\n      >\n      </app-responsibility-center>\n      <app-categories\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\"\n        [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-categories>\n      <app-risk-categories\n        *ngIf=\"activeSelector === 'riskCategories'\"\n        [categoryList]=\"riskCategoryList\"\n        [allCategories]=\"allRiskCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-risk-categories>\n\n      <app-frequency\n        *ngIf=\"activeSelector === 'frequency'\"\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\n        (saveFrequency)=\"saveFrequency($event)\"\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n        [selectedDate]=\"dashboardForm.frequencyDate\"\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n      >\n      </app-frequency>\n    </div>\n    <div\n      class=\"vx-dialog-container side-dialog\"\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div\n          class=\"vx-dialog-body-container\"\n          (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\n        >\n          <!-- Dashboard Name -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardIcon\"\n                *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Dashboard Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div class=\"vx-input-group\">\n                  <input\n                    class=\"textField\"\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\n                    (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\"\n                    (focusout)=\"activateSelector('name', false)\"\n                  />\n\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \"\n                >\n                  {{\n                    dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor\n                    [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n                  ></vcomply-editor>\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n                    >{{\n                      250 -\n                        (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \"\n                >\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Who -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'whoCanView'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Who can view this dashboard?<span\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                      *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \"\n                    >\n                      <i\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \"\n                        (click)=\"remove('whoCanView', user)\"\n                        >&#xe9ae;</i\n                      >\n                      <span\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                        >{{ user.member_name }}</span\n                      >\n                      <button\n                        *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userList.popover()\"\n                        placement=\"left\"\n                      >\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"user?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \"\n                                  (click)=\"remove('whoCanView', user)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER(S)</span\n                      >\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                      >\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n                      *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \"\n                      >&</span\n                    >\n                    <div\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\n                      id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER GROUP(S)</span\n                      >\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"groupCount.popover()\"\n                        placement=\"right\"\n                      >\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \"\n                                  (click)=\"remove('whoCanView', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.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 data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.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)=\"remove('whoCanViewGroup', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'rcList'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RESPONSIBILITY CENTER(S)</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('rc', rc)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rc.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rc.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rcList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                          .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rc?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('rc', rc)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >PROGRAM</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rCategory.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCategories\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rCategoryList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\n                          1\n                        ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rCategory?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \"\n                                  >&#xe90d;</i\n                                >\n                                {{ rCategory?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Risk Category -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RISK CATEGORIES</label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ riskCategory.category_name }}</span\n                    >\n                    <button\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"riskList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"riskCategory?.category_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('riskCategory', riskCategory)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('riskCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Display Criteria -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >DISPLAY CRITERIA</label\n                >\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n                  >\n                    Those Items that have been assigned to either the selected\n                    Responsibility Center(s) or the selected\n                    Categories.</app-cs-radio\n                  >\n\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n                  >\n                    Those Items that have been assigned to both the selected\n                    Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeframe -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \"\n                [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >TIMEFRAME</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label\n                >\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"from_date\"\n                      [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'From'\"\n                      (click)=\"openFromDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #fromDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"fromDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeFromDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                  <div\n                    class=\"date-select\"\n                    *ngIf=\"!hideToDate\"\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n                  >\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"to_date\"\n                      [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'To'\"\n                      (click)=\"openToDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #toDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"toDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeToDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                </div>\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \"\n                >\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-block\">\n          <button\n            class=\"vx-btn block primary\"\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\"\n          >\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button\n        class=\"close-dialog\"\n        type=\"button\"\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\"\n        [arTooltip]=\"'[Esc] to close'\"\n        placement=\"left\"\n        type=\"black\"\n        delay=\"0\"\n        [tooltipMandatory]=\"true\"\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n      >\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div\n        class=\"global-confirmation-alert\"\n        *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\n          dashboardForm?.selectedRiskCategories?.length == 0\n        \"\n      >\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center, Program or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center or Program.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog\n  *ngIf=\"isSmiley\"\n  [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n  *ngIf=\"openConfigureWidgets\"\n  [mode]=\"mode\"\n  [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\"\n  [showCompliance]=\"showComplianceWidgets\"\n  [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@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/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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-right.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/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-right.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n    [class.animate-slideInRight]=\"animation\"\n  >\n    <div\n      class=\"more-option\"\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-user-list\n        *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n        (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\"\n        [totalList]=\"totalList\"\n        [listDetails]=\"listDetails\"\n        [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"\n      ></app-user-list>\n      <app-responsibility-center\n        *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\"\n        [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \"\n        [rcIdKey]=\"'item_id'\"\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\"\n      >\n      </app-responsibility-center>\n      <app-categories\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\"\n        [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-categories>\n      <app-risk-categories\n        *ngIf=\"activeSelector === 'riskCategories'\"\n        [categoryList]=\"riskCategoryList\"\n        [allCategories]=\"allRiskCategories\"\n        [categoryIdKey]=\"'category_id'\"\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n        (closeCategoriesList)=\"activateSelector('', false)\"\n      ></app-risk-categories>\n\n      <app-frequency\n        *ngIf=\"activeSelector === 'frequency'\"\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\n        (saveFrequency)=\"saveFrequency($event)\"\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n        [selectedDate]=\"dashboardForm.frequencyDate\"\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n      >\n      </app-frequency>\n    </div>\n    <div\n      class=\"vx-dialog-container side-dialog\"\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n    >\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div\n          class=\"vx-dialog-body-container\"\n          (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\n        >\n          <!-- Dashboard Name -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardIcon\"\n                *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Dashboard Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div class=\"vx-input-group\">\n                  <input\n                    class=\"textField\"\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\n                    (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\"\n                    (focusout)=\"activateSelector('name', false)\"\n                  />\n\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \"\n                >\n                  {{\n                    dashboardForm.dashboardName.length > 30\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\n                      : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor\n                    [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n                  ></vcomply-editor>\n                  <span\n                    class=\"counter\"\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n                    >{{\n                      250 -\n                        (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span\n                  >\n                </div>\n\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \"\n                >\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Who -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'whoCanView'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                class=\"checkIcon\"\n                *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Who can view this dashboard?<span\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n                    >*</span\n                  ></label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                      *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \"\n                    >\n                      <i\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \"\n                        (click)=\"remove('whoCanView', user)\"\n                        >&#xe9ae;</i\n                      >\n                      <span\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                        >{{ user.member_name }}</span\n                      >\n                      <button\n                        *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userList.popover()\"\n                        placement=\"left\"\n                      >\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"user?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \"\n                                  (click)=\"remove('whoCanView', user)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER(S)</span\n                      >\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"userCount.popover()\"\n                        placement=\"left\"\n                      >\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n                      *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \"\n                      >&</span\n                    >\n                    <div\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\n                      id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    >\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\n                        >USER GROUP(S)</span\n                      >\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover\n                        (click)=\"groupCount.popover()\"\n                        placement=\"right\"\n                      >\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \"\n                                  (click)=\"remove('whoCanView', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.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 data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"data.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)=\"remove('whoCanViewGroup', data)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('whoCanView', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'rcList'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RESPONSIBILITY CENTER(S)</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('rc', rc)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rc.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rc.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rcList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                          .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rc?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('rc', rc)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'rcList'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('rcList', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >PROGRAM</label\n                >\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\n                  \"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\n                  \"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ rCategory.item_name }}</span\n                    >\n                    <button\n                      *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCategories\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"rCategoryList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\n                          1\n                        ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"rCategory?.item_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \"\n                                  >&#xe90d;</i\n                                >\n                                {{ rCategory?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- Risk Category -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \"\n                [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >RISK CATEGORIES</label\n                >\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\"\n                  [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \"\n                  >\n                    <i\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\"\n                      >&#xe9ae;</i\n                    >\n                    <span\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                      >{{ riskCategory.category_name }}</span\n                    >\n                    <button\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover\n                      (click)=\"riskList.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [arTooltip]=\"riskCategory?.category_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                              >\n                                <i\n                                  class=\"icons cross-icon\"\n                                  (click)=\"remove('riskCategory', riskCategory)\"\n                                  >&#xe90d;</i\n                                >\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('riskCategories', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Display Criteria -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n                [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >DISPLAY CRITERIA</label\n                >\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n                  >\n                    Those Items that have been assigned to either the selected\n                    Responsibility Center(s) or the selected\n                    Categories.</app-cs-radio\n                  >\n\n                  <app-cs-radio\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n                  >\n                    Those Items that have been assigned to both the selected\n                    Responsibility Center(s) and the selected\n                    Categories.</app-cs-radio\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeframe -->\n          <div\n            class=\"form-group-row\"\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \"\n                [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >TIMEFRAME</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label\n                >\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"from_date\"\n                      [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'From'\"\n                      (click)=\"openFromDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #fromDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"fromDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeFromDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                  <div\n                    class=\"date-select\"\n                    *ngIf=\"!hideToDate\"\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n                  >\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input\n                      type=\"text\"\n                      id=\"to_date\"\n                      [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \"\n                      [placeholder]=\"'To'\"\n                      (click)=\"openToDatePicker()\"\n                      readonly\n                    />\n                    <dp-date-picker\n                      #toDatePicker\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\n                      placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \"\n                      [config]=\"toDatePickerConfig\"\n                    ></dp-date-picker>\n                    <div\n                      class=\"overlay\"\n                      (click)=\"closeToDatePicker()\"\n                      *ngIf=\"datePickerOverlay\"\n                    ></div>\n                  </div>\n                </div>\n                <p\n                  class=\"vx-txt-error\"\n                  [appScrollInView]=\"true\"\n                  *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \"\n                >\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"button-block\">\n          <button\n            class=\"vx-btn block primary\"\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\"\n          >\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button\n        class=\"close-dialog\"\n        type=\"button\"\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\"\n        [arTooltip]=\"'[Esc] to close'\"\n        placement=\"left\"\n        type=\"black\"\n        delay=\"0\"\n        [tooltipMandatory]=\"true\"\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n      >\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div\n        class=\"global-confirmation-alert\"\n        *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n          dashboardForm?.selectedRiskCategories?.length == 0\n        \"\n      >\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog\n  *ngIf=\"isSmiley\"\n  [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n  *ngIf=\"openConfigureWidgets\"\n  [mode]=\"mode\"\n  [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\"\n  [showCompliance]=\"!showComplianceWidgets\"\n  [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@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/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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-right.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/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-right.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
         }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{
@@ -5393,14 +5404,47 @@ 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 }],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
             UserListComponent,
             FormGroupComponent,
@@ -5484,7 +5528,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