vc-create-dashboard 3.0.73 → 4.0.0

package/fesm2022/vc-create-dashboard.mjs

@@ -1,5 +1,5 @@
 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 { Injectable, Pipe, Optional, EventEmitter, Output, Input, Component, HostListener, Directive, ViewChild, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
 import dayjs from 'dayjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
@@ -15,36 +15,36 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i19 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import { nanoid } from 'nanoid';
-import * as i1$2 from '@angular/platform-browser';
+import DOMPurify from 'dompurify';
 import * as i5$1 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 
 let CreateDashboardService$1 = class CreateDashboardService {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService, providedIn: 'root' });
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService$1, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class TextCountPipe {
     transform(value, ...args) {
         const span = document.createElement('span');
         span.innerHTML = value;
-        console.log('span.innerHTML ==>', span.innerHTML, span.innerText.length);
         return span.textContent?.length || span.innerText.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextCountPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TextCountPipe, name: "textCount" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextCountPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: TextCountPipe, isStandalone: false, name: "textCount" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextCountPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextCountPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'textCount'
+                    name: 'textCount',
+                    standalone: false
                 }]
         }] });
 
@@ -82,6 +82,7 @@ const ASSETS = {
     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`,
+    responsibilitiesByAssignee: `${BASE_URL}/libraries/configure-widget/assets/images/responsibilitiesByAssignee.png`,
 };
 
 class Configurations {
@@ -106,17 +107,17 @@ class AuthService {
             return currentUser.token;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpClient }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpClient }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configurations, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Configurations, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class CreateDashboardService {
     http;
@@ -257,17 +258,17 @@ class CreateDashboardService {
             .post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions)
             .pipe(retry(2));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 /**
  * Service to implement pagination for users while creating an app
@@ -284,15 +285,15 @@ class PaginationService {
         this.currentPage = 1;
         this.searchValue = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class SnackBarService {
     snackbarSubject = new Subject();
@@ -304,15 +305,15 @@ class SnackBarService {
             icon,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class PopoverService {
     stopScroll = false;
@@ -322,18 +323,16 @@ class PopoverService {
     popoverWidth;
     elementPosition;
     elementDirection;
-    constructor() {
-        console.log(this.popoverHeight);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, providedIn: 'root' });
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class ConfigureWidgetsService {
     http;
@@ -346,82 +345,73 @@ 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',
@@ -547,23 +537,24 @@ class ConfigureWidgetsService {
             .pipe(retry(2));
     }
     moduleType(identifier) {
-        if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
+        if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
+            return 'COMPLIANCE';
+        }
+        else 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 });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class CsRadioComponent {
     disabled;
@@ -577,13 +568,13 @@ class CsRadioComponent {
     changeState(evt) {
         this.checkedEvent.emit(evt);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioComponent, selector: "app-cs-radio", inputs: { disabled: "disabled", readonly: "readonly", name: "name", checked: "checked", value: "value" }, outputs: { checkedEvent: "checkedEvent" }, ngImport: i0, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsRadioComponent, isStandalone: false, selector: "app-cs-radio", inputs: { disabled: "disabled", readonly: "readonly", name: "name", checked: "checked", value: "value" }, outputs: { checkedEvent: "checkedEvent" }, ngImport: i0, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-radio', template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+            args: [{ selector: 'app-cs-radio', standalone: false, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], readonly: [{
                 type: Input
@@ -712,7 +703,6 @@ class ToolTipDirective {
         if (this.placement === 'bottom-left') {
             if (hostPos.top + tooltipPos.height > h - 30) {
                 top = hostPos.top - tooltipPos.height;
-                console.log('bottom left', hostPos.top - tooltipPos.height);
                 left = hostPos.left;
                 this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom-left`);
                 this.renderer.addClass(this.tooltip, `ng-tooltip-top-left`);
@@ -725,15 +715,16 @@ class ToolTipDirective {
         this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
         this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolTipDirective, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ToolTipDirective, isStandalone: false, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ToolTipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[arTooltip]',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipTitle: [{
                 type: Input,
                 args: ['arTooltip']
             }], placement: [{
@@ -880,13 +871,13 @@ class PopoverComponent {
         this.positionX = this.leftValue;
         this.positionY = this.topValue;
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: PopoverComponent, isStandalone: false, 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popover', 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"] }]
-        }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { dontCloseonClick: [{
+            args: [{ selector: 'app-popover', standalone: false, 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"] }]
+        }], ctorParameters: () => [{ type: PopoverService }], propDecorators: { dontCloseonClick: [{
                 type: Input
             }], popoverRatio: [{
                 type: ViewChild,
@@ -939,12 +930,7 @@ class PopoverDirective {
             }
             if (this.placement === 'top') {
                 this.leftValue = elementPositionn.left + elementPositionn.width;
-                if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-                }
-                else {
-                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-                }
+                this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
             }
             if (this.placement === 'bottom') {
                 this.leftValue = elementPositionn.left + elementPositionn.width;
@@ -971,15 +957,16 @@ class PopoverDirective {
             this.popoverService.positionY = this.topValue;
         }, 10);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverDirective, selector: "[appPopover]", inputs: { refrence: "refrence", placement: "placement" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: PopoverDirective, isStandalone: false, selector: "[appPopover]", inputs: { refrence: "refrence", placement: "placement" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appPopover]',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PopoverService }]; }, propDecorators: { refrence: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PopoverService }], propDecorators: { refrence: [{
                 type: Input
             }], placement: [{
                 type: Input
@@ -1016,13 +1003,13 @@ class FloatingBarComponent {
     deleteSelected(index) {
         this.deleteEvent.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingBarComponent, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .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;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::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}\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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FloatingBarComponent, isStandalone: false, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .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;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::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}\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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'floating-bar', template: "<div class=\"lib-floating-bar-container\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .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;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::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}\n"] }]
-        }], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { cancelEvent: [{
+            args: [{ selector: 'floating-bar', standalone: false, template: "<div class=\"lib-floating-bar-container\">\n    <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\n            </div>\n        </div>\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\n                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\n            </div>\n            \n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\n            <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\n\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"lib-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data?.title}}</span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .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;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-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}.lib-floating-bar-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}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::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}\n"] }]
+        }], ctorParameters: () => [{ type: SnackBarService }], propDecorators: { cancelEvent: [{
                 type: Output
             }], submitEvent: [{
                 type: Output
@@ -1048,13 +1035,13 @@ class CsCheckboxComponent {
     valueChanged() {
         this.ngValueChange.emit(this.ngValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsCheckboxComponent, isStandalone: false, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [attr.aria-label]=\"value || 'checkbox option'\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-checkbox', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+            args: [{ selector: 'app-cs-checkbox', standalone: false, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [attr.aria-label]=\"value || 'checkbox option'\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
                 type: Input
@@ -1080,13 +1067,13 @@ class NoDataComponent {
     actionEmitter(button) {
         this.buttonAction.emit(button);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoDataComponent, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\n                        [innerHTML]=\"button?.buttonText\"></span>\n                </button>\n        </div>\n    </div>\n</div>", 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\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NoDataComponent, isStandalone: false, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\n                        [innerHTML]=\"button?.buttonText\"></span>\n                </button>\n        </div>\n    </div>\n</div>", 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\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-no-data', template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\n                        [innerHTML]=\"button?.buttonText\"></span>\n                </button>\n        </div>\n    </div>\n</div>", 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\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { action: [{
+            args: [{ selector: 'app-no-data', standalone: false, template: "<div class=\"no-data-wrapper\">\n    <div class=\"no-data-container\">\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\n        <div class=\"button-row\" *ngFor=\"let button of action\">\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\n                    [class.small]=\"smallButton\"></button>\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\n                        [innerHTML]=\"button?.buttonText\"></span>\n                </button>\n        </div>\n    </div>\n</div>", 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\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:12px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:20px;color:#787a8c;text-align:center;margin:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { action: [{
                 type: Input
             }], noDataImage: [{
                 type: Input
@@ -1121,13 +1108,14 @@ class SearchPipe {
             return JSON.stringify(item).toLowerCase().includes(args);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SearchPipe, name: "search" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SearchPipe, isStandalone: false, name: "search" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'search'
+                    name: 'search',
+                    standalone: false
                 }]
         }] });
 
@@ -1167,25 +1155,26 @@ class ConfigureWidgetsComponent {
             this.complianceWidgetsDisplayCount = 0;
             const finalData = [...new Set(this.displayedWidgets)];
             finalData.forEach((element, index) => {
-                // 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.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.RISK.forEach((ele) => {
                     if (ele.id == element.widget_code) {
                         ele.visibility = true;
@@ -1210,27 +1199,28 @@ class ConfigureWidgetsComponent {
         }
         const data = [...new Set(this.selectedWidgetsData)];
         data.forEach((element, index) => {
-            // 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.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.RISK.forEach((ele) => {
                 if (ele.id == element.widget_code && element.state == 'ACTIVE') {
                     ele.value = true;
@@ -1259,153 +1249,154 @@ 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: 'Responsibilities by Assignee',
+                id: 'responsibilities_by_assignee',
+                description: 'The Responsibilities by Assignee widget shows the performance of responsibilities by users.',
+                widgetImage: ASSETS.responsibilitiesByAssignee,
+                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',
@@ -1562,9 +1553,7 @@ class ConfigureWidgetsComponent {
             },
         ],
     };
-    selectWidget(event, 
-    //module: 'COMPLIANCE' | 'RISK',
-    module, widgetId, subWidgetId) {
+    selectWidget(event, module, widgetId, subWidgetId) {
         const widgetIndex = this.widgetsList[module].findIndex((ele) => ele.id == widgetId);
         const isSubWidgetAddable = this.selectedWidgets.findIndex((widget) => widget.id === widgetId);
         if (event) {
@@ -1612,11 +1601,11 @@ class ConfigureWidgetsComponent {
     }
     setSelectedWidgets() {
         this.selectedWidgets = [];
-        // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
-        //   if (ele.value) {
-        //     this.selectedWidgets.push(ele);
-        //   }
-        // });
+        this.widgetsList.COMPLIANCE.forEach((ele) => {
+            if (ele.value) {
+                this.selectedWidgets.push(ele);
+            }
+        });
         this.widgetsList.RISK.forEach((ele) => {
             if (ele.value) {
                 this.selectedWidgets.push(ele);
@@ -1640,14 +1629,14 @@ class ConfigureWidgetsComponent {
         this.closeConfigureWidgets.emit(false);
     }
     setWidgetsVisibilityToFalse() {
-        // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
-        //   ele.visibility = false;
-        //   if (ele.subWidgets.length > 0) {
-        //     ele.subWidgets.forEach((subElement: any) => {
-        //       subElement.visibility = false;
-        //     });
-        //   }
-        // });
+        this.widgetsList.COMPLIANCE.forEach((ele) => {
+            ele.visibility = false;
+            if (ele.subWidgets.length > 0) {
+                ele.subWidgets.forEach((subElement) => {
+                    subElement.visibility = false;
+                });
+            }
+        });
         this.widgetsList.RISK.forEach((ele) => {
             ele.visibility = false;
             if (ele.subWidgets.length > 0) {
@@ -1657,13 +1646,13 @@ 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ConfigureWidgetsComponent, isStandalone: false, 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                [attr.aria-label]=\"widget?.title || 'Untitled widget'\"\n              >\n                {{ widget?.title || \"Untitled widget\" }}\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", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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"] }]
-        }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
+            args: [{ selector: 'app-configure-widgets', standalone: false, 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                [attr.aria-label]=\"widget?.title || 'Untitled widget'\"\n              >\n                {{ widget?.title || \"Untitled widget\" }}\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: () => [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }], propDecorators: { widgetsDataModified: [{
                 type: Output
             }], closeConfigureWidgets: [{
                 type: Output
@@ -1689,15 +1678,15 @@ class LoaderInlineComponent {
         this.vLoader = this.env.vLoader;
     }
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LoaderInlineComponent, isStandalone: false, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;border-radius:50%;width:65px;height:65px;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+            args: [{ selector: 'app-loader-inline', standalone: false, template: "<div class=\"inline-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;border-radius:50%;width:65px;height:65px;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: Configurations, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class SnackBarComponent {
     snackbarService;
@@ -1733,13 +1722,13 @@ class SnackBarComponent {
     }
     ngOnDestroy() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackBarComponent, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SnackBarComponent, isStandalone: false, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-snack-bar', template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
-        }], ctorParameters: function () { return [{ type: SnackBarService }]; } });
+            args: [{ selector: 'app-snack-bar', standalone: false, template: "<div class=\"snackbar\" *ngIf=\"show\">\n  <div class=\"snackbar-inner\">\n    <div class=\"snackbarText\">\n      <!-- &#xe914; -->\n      <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \n      <span [innerHTML]=\"message\">{{ message }}</span>\n    </div>\n    <button (click)=\"close()\">[ <span>Close</span> ]</button>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: SnackBarService }] });
 
 class ScrollInViewDirective {
     el;
@@ -1763,15 +1752,16 @@ class ScrollInViewDirective {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollInViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: { appScrollInView: "appScrollInView" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollInViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ScrollInViewDirective, isStandalone: false, selector: "[appScrollInView]", inputs: { appScrollInView: "appScrollInView" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollInViewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollInViewDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appScrollInView]'
+                    selector: '[appScrollInView]',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { appScrollInView: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appScrollInView: [{
                 type: Input
             }] } });
 
@@ -1803,13 +1793,13 @@ class SmileyDialogComponent {
     smileyCloseEmitter(event) {
         this.closeSmiley.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: { message: "message", autoClose: "autoClose", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SmileyDialogComponent, isStandalone: false, selector: "app-smiley-dialog", inputs: { message: "message", autoClose: "autoClose", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;border-top-right-radius:0;transition:all 1.3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-smiley-dialog', template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
+            args: [{ selector: 'app-smiley-dialog', standalone: false, template: "<!-- active -->\n<div class=\"smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"smiley-container\">\n    <div class=\"smiley\">\n      <!-- active deactive -->\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmilyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n    <!-- <div class=\"successSmilyButton\"> -->\n    <!-- <button>White Button</button>\n            <button class=\"blue-btn\">Blue Button</button> -->\n    <!-- </div> -->\n  </div>\n</div>\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;border-top-right-radius:0;transition:all 1.3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;-webkit-animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-fwd-center{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{
                 type: Input
             }], autoClose: [{
                 type: Input
@@ -1852,13 +1842,13 @@ class DashboardFooterComponent {
     deleteSelected(element) {
         this.deleteEvent.emit(element);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails", userButtonColor: "userButtonColor" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\n    <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\n                <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{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 .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .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 .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DashboardFooterComponent, isStandalone: false, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails", userButtonColor: "userButtonColor" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\n    <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\n                <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{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 .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .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 .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dashboard-footer', template: "<div class=\"dashboard-floating-bar-container\">\n    <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\n                <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{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 .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .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 .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { cancelEvent: [{
+            args: [{ selector: 'app-dashboard-footer', standalone: false, template: "<div class=\"dashboard-floating-bar-container\">\n    <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\n        </div>\n\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\n                <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\n            </div>\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\n                <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\n            </ng-container>\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\n                <div class=\"dashboard-floating-bar-action-list\">\n                    <ul class=\"action-item\">\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\n                            <div class=\"avatar-card\">\n                                <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                    <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"right vx-d-flex vx-align-center\">\n            <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/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\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{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 .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .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 .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-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}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cancelEvent: [{
                 type: Output
             }], submitEvent: [{
                 type: Output
@@ -1980,13 +1970,13 @@ class PaginationComponent {
             this.rebuildPagination(this.start, this.totalCount);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#f1f1f1;color:#bcbcbc!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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: PaginationComponent, isStandalone: false, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin:0 0 0 4px!important;font-size:11px}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#f1f1f1;color:#bcbcbc!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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pagination', template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#f1f1f1;color:#bcbcbc!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { totalPages: [{
+            args: [{ selector: 'app-pagination', standalone: false, template: "<div class=\"pagination-box\">\n    <ul>\n        <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\">&#xe96b;</i></button></li>\n        <li *ngFor=\"let page of paginationArray\">\n            <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\n                <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}\n            </button>\n        </li>\n        <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\">&#xe970;</i></button></li>\n    </ul>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin:0 0 0 4px!important;font-size:11px}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#f1f1f1;color:#bcbcbc!important}\n"] }]
+        }], ctorParameters: () => [{ type: PaginationService }], propDecorators: { totalPages: [{
                 type: Input
             }], limit: [{
                 type: Input
@@ -2394,13 +2384,13 @@ 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: UserListComponent, isStandalone: false, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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"] }]
-        }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
+            args: [{ selector: 'app-user-list', standalone: false, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Who can view this dashboard?\n    </div>\n  </div>\n  <div class=\"user-list-body\">\n    <div\n      class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n      *ngIf=\"groupsEnabled\"\n    >\n      <button\n        (click)=\"switchTab('USER')\"\n        class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n        [class.active]=\"currentTab === 'USER'\"\n      >\n        USERS\n        <span\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalList }}</span\n        >\n      </button>\n      <button\n        id=\"switchtab\"\n        (click)=\"switchTab('GROUP')\"\n        class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n        [class.active]=\"currentTab === 'GROUP'\"\n      >\n        USER GROUPS\n        <span\n          id=\"groupscount\"\n          class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n          >{{ totalgroups }}</span\n        >\n      </button>\n    </div>\n\n    <div class=\"user-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchValue\"\n        placeholder=\"{{\n          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n        }} who can view this dashboard\"\n        (keyup.enter)=\"setSearchValue()\"\n        (focusout)=\"setSearchValue()\"\n      />\n    </div>\n\n    <ng-container *ngIf=\"currentTab === 'USER'\">\n      <div\n        class=\"vx-d-flex vx-align-center vx-justify-end\"\n        *ngIf=\"totalPages > 1\"\n      >\n        <div\n          class=\"pagination-box\"\n          *ngIf=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <app-pagination\n            (paginationFilter)=\"paginationFilter($event)\"\n            [limit]=\"limit\"\n            [totalPages]=\"totalPages\"\n            [totalList]=\"totalList\"\n          ></app-pagination>\n        </div>\n      </div>\n      <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n        <app-cs-checkbox\n          *ngIf=\"!searchValue && searchList.length > 1\"\n          [ngValue]=\"selectedList.length == totalList\"\n          (ngValueChange)=\"selectAllUsers($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n        <app-cs-checkbox\n          *ngIf=\"searchValue && searchList.length > 1\"\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div class=\"list-of-user\">\n        <div\n          class=\"selection-list vx-mb-4\"\n          [class.with-group]=\"groupsEnabled\"\n          [class.with-noData]=\"searchList.length == 0\"\n          [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n        >\n          <ul *ngIf=\"searchList.length !== 0\">\n            <li *ngFor=\"let data of searchList; let i = index\">\n              <app-cs-checkbox\n                [disabled]=\"\n                  listDetails.nonRemovableUsersList.includes(\n                    data[listDetails.elementIdKey]\n                  )\n                \"\n                [ngValue]=\"\n                  selectedList.length > 0 &&\n                  selectedIds.includes(data[listDetails.elementIdKey])\n                \"\n                (ngValueChange)=\"selectElement(data)\"\n                [arTooltip]=\"data[listDetails.tooltipKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n              >\n            </li>\n          </ul>\n\n          <app-no-data\n            *ngIf=\"!vLoader && searchList.length == 0\"\n            [noDataImage]=\"ASSETS.search_data\"\n            [noDataText]=\"'No data to display'\"\n          ></app-no-data>\n        </div>\n\n        <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n      <ng-container *ngIf=\"groupdata as groups\">\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n          <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n            <app-pagination\n              (paginationFilter)=\"paginationFilter($event)\"\n              [limit]=\"limit\"\n              [totalPages]=\"total_group_pages\"\n              [totalList]=\"totalgroups\"\n            ></app-pagination>\n          </div>\n        </div>\n        <ng-container *ngIf=\"true\">\n          <div\n            class=\"user-list-mid vx-mb-4\"\n            [class.with-pagination]=\"total_group_pages > 1\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0\">\n              <div class=\"user-list-select vx-mb-4\">\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"!searchValue && groups.length > 1\"\n                  [ngValue]=\"selectedgroupList.length == totalgroups\"\n                  (ngValueChange)=\"selectAllGroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n                <app-cs-checkbox\n                  [disabled]=\"false\"\n                  *ngIf=\"searchValue && groups.length > 1\"\n                  [ngValue]=\"checkSelectAllGroups()\"\n                  (ngValueChange)=\"selectAllsearchgroups($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{\n                      selectedgroupList.length == totalgroups\n                        ? \"Deselect All\"\n                        : \"Select All\"\n                    }}\n                  </div>\n                </app-cs-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li\n                    class=\"vx-mb-4\"\n                    *ngFor=\"let data of groups; let i = index\"\n                  >\n                    <app-cs-checkbox\n                      (ngValueChange)=\"selectGroupElement(data)\"\n                      [disabled]=\"false\"\n                      [ngValue]=\"\n                        selectedgroupList.length > 0 &&\n                        selectedGroupIds.includes(data[listDetails.groupIdkey])\n                      \"\n                    >\n                      <div class=\"user-name vx-d-flex vx-align-center\">\n                        <div\n                          class=\"group-name\"\n                          [arTooltip]=\"data[listDetails.displayGroupKey]\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          [tooltipMandatory]=\"true\"\n                        >\n                          {{ data[listDetails.displayGroupKey] }}\n                        </div>\n                        <span\n                          id=\"usersofgroup\"\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n                          >{{ data[\"associatedUsers\"].length }}\n                          {{\n                            data[\"associatedUsers\"].length > 1\n                              ? \"USERS\"\n                              : \"USER\"\n                          }}</span\n                        >\n                      </div>\n                    </app-cs-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n              <app-no-data\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  (searchValue?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                  )\n                \"\n              ></app-no-data>\n            </ng-container>\n            <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n      <div\n        class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n      >\n        <div class=\"left vx-d-flex vx-align-center\">\n          <button\n            class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n            *ngIf=\"selectedList?.length\"\n            appPopover\n            (click)=\"userCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedList?.length === 1\"\n              >User\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n            >\n            <span *ngIf=\"selectedList?.length > 1\"\n              >Users\n              {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n            >\n          </div>\n          <button\n            class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n            *ngIf=\"selectedgroupList?.length\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            {{ selectedgroupList?.length }}\n          </button>\n          <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n            <span *ngIf=\"selectedgroupList?.length === 1\"\n              >User Group selected</span\n            >\n            <span *ngIf=\"selectedgroupList?.length > 1\"\n              >User Groups selected</span\n            >\n          </div>\n\n          <app-popover #userCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element.member_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectElement(element)\"\n                        *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            element?.member_id\n                          )\n                        \"\n                        >&#xe90d;</i\n                      >\n                      {{ element.member_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <app-popover #groupCount [dontCloseonClick]=\"true\">\n            <div class=\"action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"let element of selectedgroupList\">\n                  <div class=\"avatar-card\">\n                    <span\n                      class=\"value\"\n                      [arTooltip]=\"element?.group_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      <i\n                        class=\"icons cross-icon\"\n                        (click)=\"selectGroupElement(element)\"\n                        >&#xe90d;</i\n                      >\n                      {{ element?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n\n        <div class=\"right vx-d-flex vx-align-center\">\n          <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n          <button [disabled]=\"false\" (click)=\"onSubmit()\">\n            Next <i class=\"icons\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n        (deleteEvent)=\"selectElement($event)\"\n        (submitEvent)=\"onSubmit()\"\n        [userButtonColor]=\"'greenBg'\"\n      ></app-dashboard-footer>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
+        }], ctorParameters: () => [{ type: PaginationService }, { type: CreateDashboardService }], propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
                 type: Output
@@ -2438,13 +2428,14 @@ class FilterPipe {
             return [];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, name: "filter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: FilterPipe, isStandalone: false, name: "filter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'filter'
+                    name: 'filter',
+                    standalone: false
                 }]
         }] });
 
@@ -2567,13 +2558,13 @@ class ResponsibilityCenterComponent {
     closeResponsibilityCenterList() {
         this.closeRcList.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-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      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            checkSelectAll() ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(rc.item_id)\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\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 .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-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 .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ResponsibilityCenterComponent, isStandalone: false, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-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      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            checkSelectAll() ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(rc.item_id)\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\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 .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-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 .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-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      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            checkSelectAll() ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(rc.item_id)\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\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 .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-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 .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { saveSelectedList: [{
+            args: [{ selector: 'app-responsibility-center', standalone: false, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"responsibility-center-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      Select Responsibility Center(s)\n    </div>\n  </div>\n  <div class=\"responsibility-center-body\">\n    <div class=\"responsibility-center-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Center\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"responsibilityCentersList | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll()\"\n          (ngValueChange)=\"selectAll($event)\"\n        >\n          <strong>{{\n            checkSelectAll() ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let rc of searchList; let i = index\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(rc.item_id)\"\n            (ngValueChange)=\"selectRc(rc.item_id, $event)\"\n          >\n            <ul class=\"responsibility-center-list-name\">\n              <li\n                *ngFor=\"let entity of rc.rc_name; let j = index\"\n                [arTooltip]=\"entity\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n              >\n                <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>\n                {{ entity }}\n                <!-- <span class=\"name\">{{entity}}</span> -->\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <div class=\"responsibility-center-footer\">\n      <app-dashboard-footer\n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeRcList.emit()\"\n        (deleteEvent)=\"selectRc($event.item_id, false)\"\n        (submitEvent)=\"save()\"\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 .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-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 .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { saveSelectedList: [{
                 type: Output
             }], closeRcList: [{
                 type: Output
@@ -2767,13 +2758,13 @@ class CategoriesComponent {
     close() {
         this.closeCategoriesList.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-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 .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CategoriesComponent, isStandalone: false, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">REGULATIONS</span>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">STANDARDS</span>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">INTERNAL CONTROLS</span>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">OTHERS</span>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left .category-heading{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-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 .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-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 .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
+            args: [{ selector: 'app-categories', standalone: false, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\n  </div>\n  <div class=\"category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">REGULATIONS</span>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">STANDARDS</span>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">INTERNAL CONTROLS</span>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Program\"\n                : \"programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <span class=\"category-heading\">OTHERS</span>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Program\"\n                : \"Programs\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  *ngFor=\"let entity of category.category_name; let j = index\"\n                  [arTooltip]=\"entity\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ entity }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left .category-heading{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-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 .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
                 type: Input
@@ -2963,13 +2954,13 @@ class RiskCategoriesComponent {
     close() {
         this.closeCategoriesList.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label>strategic</label>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label>operational</label>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label>compliance</label>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-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 .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: RiskCategoriesComponent, isStandalone: false, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <span>strategic</span>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <span>operational</span>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <span>compliance</span>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <span>OTHERS</span>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-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 .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-risk-categories', template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label>strategic</label>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label>operational</label>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label>compliance</label>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-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 .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
+            args: [{ selector: 'app-risk-categories', standalone: false, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\n  <div\n    class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\n  </div>\n  <div class=\"risk-category-list-mid\">\n    <div class=\"vx-d-flex vx-mb-2\">\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <span>strategic</span>\n          <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\n            {{ categoryList?.strategic?.selectedList?.length }}\n            {{\n              categoryList?.strategic?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.list?.length }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <span>operational</span>\n          <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\n            {{ categoryList?.operational?.selectedList?.length }}\n            {{\n              categoryList?.operational?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <span>compliance</span>\n          <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\n            {{ categoryList?.compliance?.selectedList?.length }}\n            {{\n              categoryList?.compliance?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"risk-category-list-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <span>OTHERS</span>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n\n    <div class=\"risk-category-list-search vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.list | filter : search as searchList\"\n    >\n      <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <div\n        class=\"risk-category-list-item vx-mb-4\"\n        [class.with-selectAll]=\"searchList.length > 1\"\n        *ngIf=\"searchList.length > 0\"\n      >\n        <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\n          <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\">\n            <app-cs-checkbox\n              [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n              (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n            >\n              <ul class=\"categories\">\n                <li\n                  [arTooltip]=\"category.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                >\n                  {{ category.category_name }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      >\n      </app-no-data>\n    </ng-container>\n\n    <app-dashboard-footer\n      [footerDetails]=\"footerDetails\"\n      (cancelEvent)=\"close()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (submitEvent)=\"save()\"\n    ></app-dashboard-footer>\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 .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-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 .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
                 type: Input
@@ -3120,7 +3111,7 @@ class FrequencyComponent {
         switch (this.frequencyTab) {
             case 'weekly': {
                 if (this.selectedDays.length > 0) {
-                    this.selectedDays.sort();
+                    this.selectedDays.sort((a, b) => a - b);
                     frequencies = this.selectedDays;
                     this.selectedDays.forEach((dayIndex, index) => {
                         stringVal += index === 0 ? this.dayNames[dayIndex] : ', ' + this.dayNames[dayIndex];
@@ -3234,7 +3225,6 @@ class FrequencyComponent {
             default:
                 this.footerDetails.isDisabled = false;
                 return true;
-                break;
         }
     }
     checkFrequencyValidity() {
@@ -3268,13 +3258,13 @@ class FrequencyComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                            <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                                <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                                <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\n</div>", 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 .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FrequencyComponent, isStandalone: false, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                            <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                                <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                                <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\n</div>", 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 .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width:1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width:1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FrequencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-frequency', template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                            <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                                <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                                <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\n</div>", 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 .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { savedFrequencyTab: [{
+            args: [{ selector: 'app-frequency', standalone: false, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\n    </div>\n    <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\n        <div class=\"create-frequency-body-inner\">\n            <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\n                <div class=\"create-frequency-tab-head\">\n                    <ul class=\"navigation\">\n                        <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\n                        <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\n                    </ul>\n                </div>\n                <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\n                    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                            <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                            <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                        </div>\n                        <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\n                            <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\n                                <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\n                        <ng-container *ngIf=\"showRadio\">\n                            <div class=\"frequency-top vx-d-flex vx-align-center\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\n                                <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\n                                <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\n                            </div>\n                            <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\n                                <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\n                                    <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\n                                </div>\n                            </div>\n                        </ng-container>                    \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"create-frequency-footer\">\n        <app-dashboard-footer \n        [footerDetails]=\"footerDetails\"\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\n        (submitEvent)=\"submitFrequency()\"\n        ></app-dashboard-footer>\n    </div>\n</div>", 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 .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width:1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width:1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"] }]
+        }], ctorParameters: () => [{ type: SnackBarService }], propDecorators: { savedFrequencyTab: [{
                 type: Input
             }], savedFrequencies: [{
                 type: Input
@@ -4093,7 +4083,7 @@ class CreateDashboardComponent {
                     ? this.getDateFormate(dashboard?.selectedToDate)
                     : '',
             },
-            email_summary: this.setFrequency('', 'export'),
+            email_summary: this.setFrequency('', 'export'), //setFormat
             widget_details: dashboard.configureWidget,
         };
         if (this.mode == 'CREATE') {
@@ -4358,13 +4348,13 @@ class CreateDashboardComponent {
             this.datePickerOverlay = false;
         }
     }
-    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?.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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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: "20.3.19", type: CreateDashboardComponent, isStandalone: false, 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                  for=\"dashboard-name\"\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                    id=\"dashboard-name\"\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                <span\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                  ></span\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                <span\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)</span\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                <span\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</span\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                <span\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</span\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                <span\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</span\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                <span\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</span\n                >\n                <span 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.</span\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                <span\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</span\n                >\n                <span 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).</span\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:transparent;background-color:transparent;position:relative;border-radius:0 0 0 30px}@-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:8px 12px 8px 36px!important;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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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.VcomplyEditorComponent, 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", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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?.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: [{
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], standalone: false, 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                  for=\"dashboard-name\"\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                    id=\"dashboard-name\"\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                <span\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                  ></span\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                <span\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)</span\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                <span\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</span\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                <span\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</span\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                <span\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</span\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                <span\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</span\n                >\n                <span 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.</span\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                <span\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</span\n                >\n                <span 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).</span\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:transparent;background-color:transparent;position:relative;border-radius:0 0 0 30px}@-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:8px 12px 8px 36px!important;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:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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: () => [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }], propDecorators: { feature: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -4397,22 +4387,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SafeHtmlPipe {
-    sanitizer;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
     transform(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
+        return DOMPurify.sanitize(html ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, isStandalone: false, name: "safeHtml" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'safeHtml'
+                    name: 'safeHtml',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+        }] });
 
 // import { CsOptionComponent } from '../cs-option/cs-option.component';
 class CsSelectComponent {
@@ -4448,7 +4435,6 @@ class CsSelectComponent {
     set RadioVal(val) {
         if (val !== undefined && val !== null && this.val !== val) {
             this.val = val;
-            console.log('VALUE', this.val);
             this.onChange(val);
             this.onTouch(val);
         }
@@ -4484,16 +4470,16 @@ class CsSelectComponent {
     closeDropdown() {
         this.dropdownToggle = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSelectComponent, selector: "cs-select", inputs: { dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", isRequired: "isRequired", placeholder: "placeholder" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsSelectComponent, isStandalone: false, selector: "cs-select", inputs: { dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", isRequired: "isRequired", placeholder: "placeholder" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CsSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"selection-wrap\">\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </label>\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"selection-wrap\">\n  <div class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </div>\n  <div class=\"input-group\">\n    <button type=\"button\" class=\"value\" (click)=\"openDropdown($event)\" [attr.aria-label]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></button>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cs-select', providers: [
                         {
@@ -4501,8 +4487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => CsSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"selection-wrap\">\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </label>\n  <div class=\"input-group\">\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dropdownLabel: [{
+                    ], standalone: false, template: "<div class=\"selection-wrap\">\n  <div class=\"label\" *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </div>\n  <div class=\"input-group\">\n    <button type=\"button\" class=\"value\" (click)=\"openDropdown($event)\" [attr.aria-label]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></button>\n  </div>\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\n    <ng-content select=\"cs-option\"></ng-content>\n  </div>\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dropdownLabel: [{
                 type: Input
             }], dropdownSubLabel: [{
                 type: Input
@@ -4519,15 +4505,15 @@ class CsSelectService {
     color;
     constructor() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSelectService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSelectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class CsOptionComponent {
     csSelect;
@@ -4546,18 +4532,17 @@ class CsOptionComponent {
             setTimeout(() => {
                 this.csSelect.valuePlaceholder = this.option.nativeElement.innerHTML;
                 this.colorSelector.color = this.color;
-                console.log(this.color);
             }, 1);
         }
         this.csSelect.writeValue(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsOptionComponent, deps: [{ token: CsSelectComponent }, { token: CsSelectService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsOptionComponent, selector: "cs-option", inputs: { value: "value", color: "color" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["options"], descendants: true }], ngImport: i0, template: "<div class=\"list\">\n  <label>\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\n    <span class=\"value\" #options>\n      <ng-content></ng-content>\n    </span>\n  </label>\n</div>\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsOptionComponent, deps: [{ token: CsSelectComponent }, { token: CsSelectService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsOptionComponent, isStandalone: false, selector: "cs-option", inputs: { value: "value", color: "color" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["options"], descendants: true }], ngImport: i0, template: "<div class=\"list\">\n  <label>\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\n    <span class=\"value\" #options>\n      <ng-content></ng-content>\n    </span>\n  </label>\n</div>\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cs-option', template: "<div class=\"list\">\n  <label>\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\n    <span class=\"value\" #options>\n      <ng-content></ng-content>\n    </span>\n  </label>\n</div>\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: CsSelectComponent }, { type: CsSelectService }]; }, propDecorators: { value: [{
+            args: [{ selector: 'cs-option', standalone: false, template: "<div class=\"list\">\n  <label>\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\n    <span class=\"value\" #options>\n      <ng-content></ng-content>\n    </span>\n  </label>\n</div>\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] }]
+        }], ctorParameters: () => [{ type: CsSelectComponent }, { type: CsSelectService }], propDecorators: { value: [{
                 type: Input
             }], option: [{
                 type: ViewChild,
@@ -4567,11 +4552,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SelectModule, declarations: [CsSelectComponent, CsOptionComponent, SafeHtmlPipe], imports: [FormsModule, CommonModule], exports: [CsSelectComponent, CsOptionComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectModule, imports: [FormsModule, CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SelectModule, declarations: [CsSelectComponent, CsOptionComponent, SafeHtmlPipe], imports: [FormsModule, CommonModule], exports: [CsSelectComponent, CsOptionComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectModule, imports: [FormsModule, CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CsSelectComponent, CsOptionComponent, SafeHtmlPipe],
@@ -4581,11 +4566,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class PaginationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PaginationComponent],
@@ -4602,19 +4587,16 @@ class CsSwitchComponent {
     tooltipMessage;
     position;
     constructor() { }
-    ngOnInit() {
-        // console.log(this.value);
-    }
     valueChanged() {
         this.ngValueChange.emit(this.ngValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsSwitchComponent, isStandalone: false, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-switch', template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+            args: [{ selector: 'app-cs-switch', standalone: false, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
                 type: Input
@@ -4631,13 +4613,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class CsRadioGroupComponent {
     constructor() { }
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioGroupComponent, selector: "app-cs-radio-group", ngImport: i0, template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n", styles: [""], dependencies: [{ kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsRadioGroupComponent, isStandalone: false, selector: "app-cs-radio-group", ngImport: i0, template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n", styles: [""], dependencies: [{ kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-radio-group', template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'app-cs-radio-group', standalone: false, template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n" }]
+        }], ctorParameters: () => [] });
 
 class ClickOutsideDirective {
     elementRef;
@@ -4651,15 +4633,16 @@ class ClickOutsideDirective {
             this.clickOutside.emit(null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onMouseEnter($event.target)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onMouseEnter($event.target)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutside: [{
                 type: Output,
                 args: ['clickOutside']
             }], onMouseEnter: [{
@@ -4674,13 +4657,14 @@ class PascalPipe {
         }
         return value.charAt(0).toUpperCase() + value.slice(1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, name: "pascal" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PascalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: PascalPipe, isStandalone: false, name: "pascal" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PascalPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'pascal',
+                    standalone: false
                 }]
         }] });
 
@@ -4754,12 +4738,12 @@ class CsFormSelectComponent {
     closeDropdown() {
         this.dropdownOption = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsFormSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsFormSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsFormSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CsFormSelectComponent, isStandalone: false, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <div *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </div>\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsFormSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CsFormSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
+            args: [{ selector: 'app-cs-select', standalone: false, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <div *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span>\n  </div>\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\n    </span>\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"risk-icons\">&#xe919;</i>\n    </span>\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
         }], propDecorators: { dataList: [{
                 type: Input
             }], dropdownLabel: [{
@@ -4799,11 +4783,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class TooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ToolTipDirective],
@@ -4824,19 +4808,20 @@ class SearchMultiSelectPipe {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, name: "searchMultiSelect" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchMultiSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SearchMultiSelectPipe, isStandalone: false, name: "searchMultiSelect" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchMultiSelectPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'searchMultiSelect',
+                    standalone: false
                 }]
         }] });
 
 class FormgroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, declarations: [CsCheckboxComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormgroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: FormgroupModule, declarations: [CsCheckboxComponent,
             CsRadioComponent,
             CsSwitchComponent,
             CsRadioGroupComponent,
@@ -4849,9 +4834,9 @@ class FormgroupModule {
             CsRadioGroupComponent,
             CsFormSelectComponent,
             SearchMultiSelectPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, imports: [CommonModule, FormsModule, TooltipModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormgroupModule, imports: [CommonModule, FormsModule, TooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormgroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4877,11 +4862,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class PopoverModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, declarations: [PopoverComponent, PopoverDirective], imports: [CommonModule], exports: [PopoverComponent, PopoverDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, providers: [PopoverService], imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: PopoverModule, declarations: [PopoverComponent, PopoverDirective], imports: [CommonModule], exports: [PopoverComponent, PopoverDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverModule, providers: [PopoverService], imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PopoverComponent, PopoverDirective],
@@ -4892,15 +4877,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DashboardFooterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterModule, declarations: [DashboardFooterComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterModule, declarations: [DashboardFooterComponent], imports: [CommonModule,
             PopoverModule,
             TooltipModule], exports: [DashboardFooterComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterModule, imports: [CommonModule,
             PopoverModule,
             TooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4922,15 +4907,16 @@ class InsertionDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InsertionDirective, selector: "[appInsertion]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InsertionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: InsertionDirective, isStandalone: false, selector: "[appInsertion]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InsertionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appInsertion]',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
 class DialogConfig {
     data;
@@ -5014,26 +5000,26 @@ class DialogComponent {
         this.onDialogClose.next(data);
         document.body.style.overflow = 'auto';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: 'router' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: 'router' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DialogComponent, isStandalone: false, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{-webkit-animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.dialog.animate.right{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dialog', template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i5$1.Router, decorators: [{
+            args: [{ selector: 'app-dialog', standalone: false, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{-webkit-animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes animate-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.dialog.animate.right{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes animate-right{0%{-webkit-transform:translateX(100%);transform:translate(100%)}to{-webkit-transform:translateX(0);transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i5$1.Router, decorators: [{
                     type: Inject,
                     args: ['router']
-                }] }]; }, propDecorators: { insertionPoint: [{
+                }] }], propDecorators: { insertionPoint: [{
                 type: ViewChild,
                 args: [InsertionDirective, { static: true }]
             }] } });
 
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, declarations: [DialogComponent, InsertionDirective], imports: [CommonModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, providers: [DialogRef], imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: DialogModule, declarations: [DialogComponent, InsertionDirective], imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogModule, providers: [DialogRef], imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5098,15 +5084,15 @@ class DialogService {
         this.appRef.detachView(this.dialogComponentRef.hostView);
         this.dialogComponentRef.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, providedIn: DialogModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogService, providedIn: DialogModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: DialogModule,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }] });
 
 class FormGroupComponent {
     dialog;
@@ -5166,7 +5152,6 @@ class FormGroupComponent {
     }
     animateImage() {
         const circleImage = document.getElementsByClassName('image');
-        console.log(circleImage);
     }
     selectWhoCanViewThis() {
         this.openWhoCanViewThis.emit();
@@ -5225,13 +5210,13 @@ class FormGroupComponent {
     displayCriteriaSelected(event, selection) {
         this.displayCriteria = selection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormGroupComponent, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\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 will be\n            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                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\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 class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\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/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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: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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ 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: 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: "pipe", type: i1$1.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormGroupComponent, isStandalone: false, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></span\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></span\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">PROGRAM</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">RISK CATEGORIES</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">DISPLAY CRITERIA</span>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">TIMEFRAME</span>\n          <span 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 will be\n            displayed permanently.</span\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                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\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 class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></span\n          >\n          <span class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </span>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\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/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background:transparent;background-color:transparent;position:relative;border-radius:0 0 0 30px}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 .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 .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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 .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.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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VcomplyEditorComponent, 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: 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", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-group', template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\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 will be\n            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                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\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 class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\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/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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: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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { openCategoryList: [{
+            args: [{ selector: 'app-form-group', standalone: false, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></span\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></span\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">PROGRAM</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">RISK CATEGORIES</span>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">DISPLAY CRITERIA</span>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">TIMEFRAME</span>\n          <span 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 will be\n            displayed permanently.</span\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                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\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 class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <span class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></span\n          >\n          <span class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </span>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\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/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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background:transparent;background-color:transparent;position:relative;border-radius:0 0 0 30px}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 .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 .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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 .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.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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
+        }], ctorParameters: () => [{ type: DialogService }], propDecorators: { openCategoryList: [{
                 type: Output
             }], openResponsibilityCenterList: [{
                 type: Output
@@ -5252,15 +5237,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class FloatingBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule,
             PopoverModule,
             TooltipModule], exports: [FloatingBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarModule, imports: [CommonModule,
             PopoverModule,
             TooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FloatingBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5278,11 +5263,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DirectivesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DirectivesModule, declarations: [ScrollInViewDirective], imports: [CommonModule], exports: [ScrollInViewDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: DirectivesModule, declarations: [ScrollInViewDirective], imports: [CommonModule], exports: [ScrollInViewDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5298,11 +5283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class NoDataModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NoDataModule, declarations: [NoDataComponent], imports: [CommonModule], exports: [NoDataComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoDataModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NoDataModule, declarations: [NoDataComponent], imports: [CommonModule], exports: [NoDataComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoDataModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoDataModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NoDataComponent],
@@ -5312,22 +5297,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class ConfigureWidgetsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsModule, declarations: [ConfigureWidgetsComponent, SearchPipe], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsModule, declarations: [ConfigureWidgetsComponent, SearchPipe], imports: [CommonModule,
             FloatingBarModule,
             FormgroupModule,
             FormsModule,
             DirectivesModule,
             NoDataModule,
             NgOptimizedImage], exports: [ConfigureWidgetsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsModule, imports: [CommonModule,
             FloatingBarModule,
             FormgroupModule,
             FormsModule,
             DirectivesModule,
             NoDataModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfigureWidgetsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5358,22 +5343,22 @@ class LoaderComponent {
         this.vLoader = this.env.vLoader;
     }
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LoaderComponent, isStandalone: false, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;border-radius:50%;width:65px;height:65px;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+            args: [{ selector: 'app-loader', standalone: false, template: "<div class=\"main-loader\">\n  <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\n  <div class=\"loader-index\">\n    <div class=\"loader-index-circle\"></div>\n  </div>\n</div>\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;border-radius:50%;width:65px;height:65px;border:4px solid transparent;border-top-color:#dbdbdb;-webkit-animation:1.5s spin infinite linear;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: Configurations, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 
 class VLoaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule, NgOptimizedImage], exports: [LoaderComponent, LoaderInlineComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule, NgOptimizedImage], exports: [LoaderComponent, LoaderInlineComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VLoaderModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VLoaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LoaderComponent, LoaderInlineComponent],
@@ -5383,11 +5368,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class SnackBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SnackBarModule, declarations: [SnackBarComponent], imports: [CommonModule], exports: [SnackBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SnackBarModule, declarations: [SnackBarComponent], imports: [CommonModule], exports: [SnackBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SnackBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SnackBarComponent],
@@ -5397,11 +5382,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class SmileyDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogModule, declarations: [SmileyDialogComponent], imports: [CommonModule], exports: [SmileyDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogModule, declarations: [SmileyDialogComponent], imports: [CommonModule], exports: [SmileyDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SmileyDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SmileyDialogComponent],
@@ -5417,8 +5402,8 @@ class 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 });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
             UserListComponent,
             FormGroupComponent,
             ResponsibilityCenterComponent,
@@ -5445,7 +5430,7 @@ class CreateDashboardModule {
             SmileyDialogModule,
             DpDatePickerModule,
             NgOptimizedImage], exports: [CreateDashboardComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
             VcomplyEditorModule,
             FormgroupModule,
             FormsModule,
@@ -5464,7 +5449,7 @@ class CreateDashboardModule {
             SmileyDialogModule,
             DpDatePickerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CreateDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [