vc-create-dashboard 2.9.8 → 3.0.0

package/fesm2022/vc-create-dashboard.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, forwardRef, NgModule } from '@angular/core';
+import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule } from '@angular/core';
+import * as dayjs from 'dayjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
@@ -85,25 +86,33 @@ class CreateDashboardService {
     http;
     authService;
     env;
-    httpOptions = {
-        headers: new HttpHeaders({ 'Content-Type': 'application/json', token: this.authService.getAuthorizationToken() })
-    };
+    httpOptions;
     constructor(http, authService, config) {
         this.http = http;
         this.authService = authService;
         if (config) {
             this.env = config.envConfig;
         }
+        this.httpOptions = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                token: this.authService.getAuthorizationToken(),
+            }),
+        };
     }
     /*
-    * Fetches the Organization Users List by making an API call
-    */
+     * Fetches the Organization Users List by making an API call
+     */
     getOrganizationUsers(url) {
-        return this.http.get(this.env?.organizationGet + 'organisationUsersList&paginationType=small' +
-            (url.p ? '&p=' + url.p : '') + (url.type ? '&type=' + url.type : '') +
-            (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map((res) => {
+        return this.http
+            .get(this.env?.organizationGet +
+            'organisationUsersList&paginationType=small' +
+            (url.p ? '&p=' + url.p : '') +
+            (url.type ? '&type=' + url.type : '') +
+            (url.q ? '&q=' + url.q : ''), this.httpOptions)
+            .pipe(map((res) => {
             return res;
-        }), retry(2), catchError(err => of(err)));
+        }), retry(2), catchError((err) => of(err)));
     }
     /**
      * Fetches the OrganizationUsers details of users List to set pagination details including number of
@@ -111,10 +120,14 @@ class CreateDashboardService {
      * @param url  contains info about type & search query
      */
     getOrganizationUsersCount(url) {
-        return this.http.get(this.env?.organizationGet + 'organisationUsersCount&paginationType=small' +
-            (url.type ? '&type=' + url.type : '') + (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map(res => {
+        return this.http
+            .get(this.env?.organizationGet +
+            'organisationUsersCount&paginationType=small' +
+            (url.type ? '&type=' + url.type : '') +
+            (url.q ? '&q=' + url.q : ''), this.httpOptions)
+            .pipe(map((res) => {
             return res;
-        }), catchError(err => of(err)));
+        }), catchError((err) => of(err)));
     }
     getCategoryList() {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
@@ -126,52 +139,72 @@ class CreateDashboardService {
      * Fetches all users by making an API call
      */
     getAllUsers() {
-        return this.http.get(this.env?.organizationGet + 'selectAllUsers&type=all', this.httpOptions).pipe(retry(2));
+        return this.http
+            .get(this.env?.organizationGet + 'selectAllUsers&type=all', this.httpOptions)
+            .pipe(retry(2));
     }
     /**
      *  Fetches all groups by making an API call
      * */
     getAllGroups(params) {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http.get(this.env?.organizationGet + 'groupsList&permType=dashboard&memberExists=1', { params, headers }).pipe(retry(2));
+        return this.http
+            .get(this.env?.organizationGet +
+            'groupsList&permType=dashboard&memberExists=1', { params, headers })
+            .pipe(retry(2));
     }
     /**
-    * Fetches responsibilityCentersList by making an API call
-    */
+     * Fetches responsibilityCentersList by making an API call
+     */
     getResponsibilityCenterList() {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http.get(this.env?.complianceGet + 'responsibilityCenterTree', {
+        return this.http
+            .get(this.env?.complianceGet + 'responsibilityCenterTree', {
             headers,
-        }).pipe(retry(2));
+        })
+            .pipe(retry(2));
     }
     getComplianceCategoriesList() {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
+        return this.http
+            .get(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
             headers,
-        }).pipe(retry(2));
+        })
+            .pipe(retry(2));
     }
     getComplianceCategoriesListFromGlobal() {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http.get(this.env?.complianceGet + 'complianceCategory/CategoryListTree&program=1&isDashboard=true', {
+        return this.http
+            .get(this.env?.complianceGet +
+            'complianceCategory/CategoryListTree&program=1&isDashboard=true', {
             headers,
-        }).pipe(retry(2));
+        })
+            .pipe(retry(2));
     }
     submitDashboard(payload) {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http.post(this.env.dashboard + 'CreateDashboard', payload, { headers }).pipe(retry(2));
+        return this.http
+            .post(this.env.dashboard + 'CreateDashboard', payload, { headers })
+            .pipe(retry(2));
     }
     /**
      * Fetches the Dashboard details for data population to Edit the dashboard
      * @param id
      */
     fetchDashboard(id) {
-        return this.http.get(this.env.dashboard + id + '?mode=edit', this.httpOptions).pipe(retry(2));
+        return this.http
+            .get(this.env.dashboard + id + '?mode=edit', this.httpOptions)
+            .pipe(retry(2));
     }
     updateDashboard(id, payload) {
-        return this.http.put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions).pipe(retry(2));
+        return this.http
+            .put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions)
+            .pipe(retry(2));
     }
     getUserInformation() {
-        return this.http.get(this.env?.organizationGet + 'users&id=' + this?._ID(), this.httpOptions).pipe(retry(2));
+        return this.http
+            .get(this.env?.organizationGet + 'users&id=' + this?._ID(), this.httpOptions)
+            .pipe(retry(2));
     }
     _ID() {
         const helper = new JwtHelperService();
@@ -184,7 +217,9 @@ class CreateDashboardService {
         return '';
     }
     checkDuplicateDashboardName(payload) {
-        return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(retry(2));
+        return this.http
+            .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' });
@@ -192,7 +227,7 @@ class CreateDashboardService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
                     type: Optional
@@ -3317,6 +3352,9 @@ class CreateDashboardComponent {
     groupList;
     groupsEnabled = false;
     totalgroups;
+    fromDatePickerPopup;
+    toDatePickerPopup;
+    openedDatePicker = '';
     constructor(createDashboardService, paginationService, cdr, snackBar, popoverService, configureWidgetsService, textCount) {
         this.createDashboardService = createDashboardService;
         this.paginationService = paginationService;
@@ -3359,7 +3397,7 @@ class CreateDashboardComponent {
                 this.showRiskCategory = false;
             }
         }, (error) => {
-            console.log(error);
+            console.error(error);
         });
     }
     /**
@@ -3377,14 +3415,17 @@ class CreateDashboardComponent {
         this.activeSelector = event ? type : '';
     }
     openFromDatePicker() {
+        this.openedDatePicker = 'FROM_DATE';
         this.fromDatePicker?.api?.open();
         this.datePickerOverlay = true;
     }
     openToDatePicker() {
+        this.openedDatePicker = 'TO_DATE';
         this.toDatePicker?.api?.open();
         this.datePickerOverlay = true;
     }
     closeFromDatePicker() {
+        this.fromDatePicker?.api?.close();
         if (!this.dashboardForm.selectedFromDate) {
             this.dashboardForm.selectedToDate = undefined;
             this.hideToDate = true;
@@ -3407,7 +3448,6 @@ class CreateDashboardComponent {
                 this.hideToDate = false;
             }, 20);
         }
-        this.fromDatePicker?.api?.close();
         this.datePickerOverlay = false;
     }
     closeToDatePicker() {
@@ -3426,16 +3466,11 @@ class CreateDashboardComponent {
     }
     getCurrentDate() {
         let today = new Date();
-        return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
+        return dayjs(today).format('DD-MM-YYYY');
     }
     setToDate(data) {
         let today = new Date(data);
-        return (today.getDate() +
-            1 +
-            '-' +
-            (today.getMonth() + 1) +
-            '-' +
-            today.getFullYear());
+        return dayjs(today).format('DD-MM-YYYY');
     }
     getFromDate(data) {
         let today = new Date(data);
@@ -3608,9 +3643,6 @@ class CreateDashboardComponent {
             this.complianceCategoriesListLoaded = true;
         });
     }
-    saveSelectedCategory(event) {
-        console.log('event==>>>', event);
-    }
     getCategoryList() {
         this.createDashboardService.getCategoryList().subscribe((res) => {
             this.riskCategoryList.strategic.list = res.strategic_arr;
@@ -4035,7 +4067,6 @@ class CreateDashboardComponent {
     }
     populateDashboardForm(data) {
         try {
-            console.log(' datattttta ===> ', data, this.groupList);
             (this.dashboardForm.dashboardName = data?.dashboard_name),
                 (this.dashboardForm.dashboardDescriptionText =
                     data?.description[0]?.content ?? ''),
@@ -4073,7 +4104,7 @@ class CreateDashboardComponent {
             }, 20);
         }
         catch (error) {
-            console.log('populate dashboard error =>', error);
+            console.error('populate dashboard error =>', error);
         }
     }
     setFrequency(event, mode) {
@@ -4193,12 +4224,35 @@ class CreateDashboardComponent {
             });
         });
     }
+    documentClick(event) {
+        const fromDateInputElement = document.getElementById(this.openedDatePicker.toLowerCase()) || null;
+        const datePickerCalendarContainer = document.getElementsByClassName('dp-day-calendar-container')[0];
+        const openedElement = this.openedDatePicker === 'FROM_DATE'
+            ? this.fromDatePickerPopup
+            : this.toDatePickerPopup;
+        const isOutsideFromDateInput = !openedElement.nativeElement.contains(event.target);
+        const isNotFromDateElement = event.target !== fromDateInputElement;
+        const isNotInsideCalendar = !datePickerCalendarContainer.contains(event.target);
+        const selectedDatePicker = this.openedDatePicker === 'FROM_DATE'
+            ? this.fromDatePicker
+            : this.toDatePicker;
+        if (isOutsideFromDateInput && isNotFromDateElement && isNotInsideCalendar) {
+            this.documentClickListener(event.target, openedElement, selectedDatePicker);
+        }
+    }
+    documentClickListener(target, openedElements, selectedDatePicker) {
+        if (!openedElements.nativeElement.contains(target) &&
+            selectedDatePicker?.areCalendarsShown) {
+            selectedDatePicker?.api?.close();
+            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)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div\r\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n    [class.animate-slideInRight]=\"animation\"\r\n  >\r\n    <div\r\n      class=\"more-option\"\r\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-user-list\r\n        *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n        (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\"\r\n        [totalList]=\"totalList\"\r\n        [listDetails]=\"listDetails\"\r\n        [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"\r\n      ></app-user-list>\r\n      <app-responsibility-center\r\n        *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\"\r\n        [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \"\r\n        [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\"\r\n      >\r\n      </app-responsibility-center>\r\n      <app-categories\r\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\"\r\n        [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-categories>\r\n      <app-risk-categories\r\n        *ngIf=\"activeSelector === 'riskCategories'\"\r\n        [categoryList]=\"riskCategoryList\"\r\n        [allCategories]=\"allRiskCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-risk-categories>\r\n\r\n      <app-frequency\r\n        *ngIf=\"activeSelector === 'frequency'\"\r\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n        (saveFrequency)=\"saveFrequency($event)\"\r\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n        [selectedDate]=\"dashboardForm.frequencyDate\"\r\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n      >\r\n      </app-frequency>\r\n    </div>\r\n    <div\r\n      class=\"vx-dialog-container side-dialog\"\r\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div\r\n          class=\"vx-dialog-body-container\"\r\n          (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n        >\r\n          <!-- Dashboard Name -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n                *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Dashboard Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div class=\"vx-input-group\">\r\n                  <input\r\n                    class=\"textField\"\r\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\r\n                    (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\"\r\n                    (focusout)=\"activateSelector('name', false)\"\r\n                  />\r\n\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \"\r\n                >\r\n                  {{\r\n                    dashboardForm.dashboardName.length > 30\r\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                      : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor\r\n                    [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n                  ></vcomply-editor>\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n                    >{{\r\n                      250 -\r\n                        (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \"\r\n                >\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Who -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'whoCanView'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Who can view this dashboard?<span\r\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                      *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \"\r\n                    >\r\n                      <i\r\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                        *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \"\r\n                        (click)=\"remove('whoCanView', user)\"\r\n                        >&#xe9ae;</i\r\n                      >\r\n                      <span\r\n                        class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                        >{{ user.member_name }}</span\r\n                      >\r\n                      <button\r\n                        *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\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\"\r\n                        appPopover\r\n                        (click)=\"userList.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"user?.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', user)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER(S)</span\r\n                      >\r\n                      <button\r\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\"\r\n                        appPopover\r\n                        (click)=\"userCount.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span\r\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \"\r\n                      >&</span\r\n                    >\r\n                    <div\r\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n                      id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER GROUP(S)</span\r\n                      >\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover\r\n                        (click)=\"groupCount.popover()\"\r\n                        placement=\"right\"\r\n                      >\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.group_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('whoCanViewGroup', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\r\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\"\r\n                    (click)=\"activateSelector('whoCanView', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'rcList'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RESPONSIBILITY CENTER(S)</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('rc', rc)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rc.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rc.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rcList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                          .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rc?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('rc', rc)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'rcList'\"\r\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\"\r\n                    (click)=\"activateSelector('rcList', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >PROGRAM</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rCategory.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCategories\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rCategoryList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                          1\r\n                        ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rCategory?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rCategory?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Risk Category -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'riskCategories'\"\r\n            *ngIf=\"showRiskCategory && isManageRisk\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'riskCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n                  activeSelector === 'riskCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n                  activeSelector !== 'riskCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\" *ngIf=\"isManageRisk\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RISK CATEGORIES</label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('riskCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Risk Categories that you would like displayed<br />in\r\n                    the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('riskCategory', riskCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"riskCategory.category_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ riskCategory.category_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"riskList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let riskCategory of dashboardForm?.selectedRiskCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"riskCategory?.category_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('riskCategory', riskCategory)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ riskCategory?.category_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('riskCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Display Criteria -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >DISPLAY CRITERIA</label\r\n                >\r\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n                  >\r\n                    Those Items that have been assigned to either the selected\r\n                    Responsibility Center(s) or the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n                  >\r\n                    Those Items that have been assigned to both the selected\r\n                    Responsibility Center(s) and the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeframe -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >TIMEFRAME</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >Select how long you would like the information selected to be\r\n                  displayed for. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label\r\n                >\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'From'\"\r\n                      (click)=\"openFromDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #fromDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"fromDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeFromDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    class=\"date-select\"\r\n                    *ngIf=\"!hideToDate\"\r\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n                  >\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'To'\"\r\n                      (click)=\"openToDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #toDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"toDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeToDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                </div>\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \"\r\n                >\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\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\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\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\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button\r\n            class=\"vx-btn block primary\"\r\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\"\r\n          >\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"close-dialog\"\r\n        type=\"button\"\r\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\"\r\n        [arTooltip]=\"'[Esc] to close'\"\r\n        placement=\"left\"\r\n        type=\"black\"\r\n        delay=\"0\"\r\n        [tooltipMandatory]=\"true\"\r\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n      >\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div\r\n        class=\"global-confirmation-alert\"\r\n        *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n          dashboardForm?.selectedRiskCategories?.length == 0\r\n        \"\r\n      >\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center, Program or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center or Program.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog\r\n  *ngIf=\"isSmiley\"\r\n  [message]=\"smileyMessage\"\r\n></app-smiley-dialog>\r\n\r\n<app-configure-widgets\r\n  *ngIf=\"openConfigureWidgets\"\r\n  [mode]=\"mode\"\r\n  [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\"\r\n  [showCompliance]=\"showComplianceWidgets\"\r\n  [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\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}::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}\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: "component", type: i10.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div\r\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n    [class.animate-slideInRight]=\"animation\"\r\n  >\r\n    <div\r\n      class=\"more-option\"\r\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-user-list\r\n        *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n        (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\"\r\n        [totalList]=\"totalList\"\r\n        [listDetails]=\"listDetails\"\r\n        [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"\r\n      ></app-user-list>\r\n      <app-responsibility-center\r\n        *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\"\r\n        [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \"\r\n        [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\"\r\n      >\r\n      </app-responsibility-center>\r\n      <app-categories\r\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\"\r\n        [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-categories>\r\n      <app-risk-categories\r\n        *ngIf=\"activeSelector === 'riskCategories'\"\r\n        [categoryList]=\"riskCategoryList\"\r\n        [allCategories]=\"allRiskCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-risk-categories>\r\n\r\n      <app-frequency\r\n        *ngIf=\"activeSelector === 'frequency'\"\r\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n        (saveFrequency)=\"saveFrequency($event)\"\r\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n        [selectedDate]=\"dashboardForm.frequencyDate\"\r\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n      >\r\n      </app-frequency>\r\n    </div>\r\n    <div\r\n      class=\"vx-dialog-container side-dialog\"\r\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div\r\n          class=\"vx-dialog-body-container\"\r\n          (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n        >\r\n          <!-- Dashboard Name -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n                *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Dashboard Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div class=\"vx-input-group\">\r\n                  <input\r\n                    class=\"textField\"\r\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\r\n                    (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\"\r\n                    (focusout)=\"activateSelector('name', false)\"\r\n                  />\r\n\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \"\r\n                >\r\n                  {{\r\n                    dashboardForm.dashboardName.length > 30\r\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                      : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor\r\n                    [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n                  ></vcomply-editor>\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n                    >{{\r\n                      250 -\r\n                        (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \"\r\n                >\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Who -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'whoCanView'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Who can view this dashboard?<span\r\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                      *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \"\r\n                    >\r\n                      <i\r\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                        *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \"\r\n                        (click)=\"remove('whoCanView', user)\"\r\n                        >&#xe9ae;</i\r\n                      >\r\n                      <span\r\n                        class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                        >{{ user.member_name }}</span\r\n                      >\r\n                      <button\r\n                        *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\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\"\r\n                        appPopover\r\n                        (click)=\"userList.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"user?.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', user)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER(S)</span\r\n                      >\r\n                      <button\r\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\"\r\n                        appPopover\r\n                        (click)=\"userCount.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span\r\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \"\r\n                      >&</span\r\n                    >\r\n                    <div\r\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n                      id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER GROUP(S)</span\r\n                      >\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover\r\n                        (click)=\"groupCount.popover()\"\r\n                        placement=\"right\"\r\n                      >\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.group_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('whoCanViewGroup', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\r\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\"\r\n                    (click)=\"activateSelector('whoCanView', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'rcList'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RESPONSIBILITY CENTER(S)</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('rc', rc)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rc.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rc.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rcList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                          .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rc?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('rc', rc)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'rcList'\"\r\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\"\r\n                    (click)=\"activateSelector('rcList', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >PROGRAM</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rCategory.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCategories\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rCategoryList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                          1\r\n                        ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rCategory?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rCategory?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Risk Category -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'riskCategories'\"\r\n            *ngIf=\"showRiskCategory && isManageRisk\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'riskCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n                  activeSelector === 'riskCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n                  activeSelector !== 'riskCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\" *ngIf=\"isManageRisk\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RISK CATEGORIES</label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('riskCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Risk Categories that you would like displayed<br />in\r\n                    the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('riskCategory', riskCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"riskCategory.category_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ riskCategory.category_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"riskList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let riskCategory of dashboardForm?.selectedRiskCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"riskCategory?.category_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('riskCategory', riskCategory)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ riskCategory?.category_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('riskCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Display Criteria -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >DISPLAY CRITERIA</label\r\n                >\r\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n                  >\r\n                    Those Items that have been assigned to either the selected\r\n                    Responsibility Center(s) or the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n                  >\r\n                    Those Items that have been assigned to both the selected\r\n                    Responsibility Center(s) and the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeframe -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >TIMEFRAME</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >Select how long you would like the information selected to be\r\n                  displayed for. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label\r\n                >\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"from_date\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'From'\"\r\n                      (click)=\"openFromDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #fromDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"fromDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeFromDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    class=\"date-select\"\r\n                    *ngIf=\"!hideToDate\"\r\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n                  >\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"to_date\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'To'\"\r\n                      (click)=\"openToDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #toDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"toDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeToDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                </div>\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \"\r\n                >\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\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\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\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\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button\r\n            class=\"vx-btn block primary\"\r\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\"\r\n          >\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"close-dialog\"\r\n        type=\"button\"\r\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\"\r\n        [arTooltip]=\"'[Esc] to close'\"\r\n        placement=\"left\"\r\n        type=\"black\"\r\n        delay=\"0\"\r\n        [tooltipMandatory]=\"true\"\r\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n      >\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div\r\n        class=\"global-confirmation-alert\"\r\n        *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n          dashboardForm?.selectedRiskCategories?.length == 0\r\n        \"\r\n      >\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center, Program or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center or Program.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog\r\n  *ngIf=\"isSmiley\"\r\n  [message]=\"smileyMessage\"\r\n></app-smiley-dialog>\r\n\r\n<app-configure-widgets\r\n  *ngIf=\"openConfigureWidgets\"\r\n  [mode]=\"mode\"\r\n  [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\"\r\n  [showCompliance]=\"showComplianceWidgets\"\r\n  [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\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: "component", type: i10.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div\r\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n    [class.animate-slideInRight]=\"animation\"\r\n  >\r\n    <div\r\n      class=\"more-option\"\r\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-user-list\r\n        *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n        (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\"\r\n        [totalList]=\"totalList\"\r\n        [listDetails]=\"listDetails\"\r\n        [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"\r\n      ></app-user-list>\r\n      <app-responsibility-center\r\n        *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\"\r\n        [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \"\r\n        [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\"\r\n      >\r\n      </app-responsibility-center>\r\n      <app-categories\r\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\"\r\n        [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-categories>\r\n      <app-risk-categories\r\n        *ngIf=\"activeSelector === 'riskCategories'\"\r\n        [categoryList]=\"riskCategoryList\"\r\n        [allCategories]=\"allRiskCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-risk-categories>\r\n\r\n      <app-frequency\r\n        *ngIf=\"activeSelector === 'frequency'\"\r\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n        (saveFrequency)=\"saveFrequency($event)\"\r\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n        [selectedDate]=\"dashboardForm.frequencyDate\"\r\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n      >\r\n      </app-frequency>\r\n    </div>\r\n    <div\r\n      class=\"vx-dialog-container side-dialog\"\r\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div\r\n          class=\"vx-dialog-body-container\"\r\n          (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n        >\r\n          <!-- Dashboard Name -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n                *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Dashboard Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div class=\"vx-input-group\">\r\n                  <input\r\n                    class=\"textField\"\r\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\r\n                    (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\"\r\n                    (focusout)=\"activateSelector('name', false)\"\r\n                  />\r\n\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \"\r\n                >\r\n                  {{\r\n                    dashboardForm.dashboardName.length > 30\r\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                      : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor\r\n                    [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n                  ></vcomply-editor>\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n                    >{{\r\n                      250 -\r\n                        (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \"\r\n                >\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Who -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'whoCanView'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Who can view this dashboard?<span\r\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                      *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \"\r\n                    >\r\n                      <i\r\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                        *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \"\r\n                        (click)=\"remove('whoCanView', user)\"\r\n                        >&#xe9ae;</i\r\n                      >\r\n                      <span\r\n                        class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                        >{{ user.member_name }}</span\r\n                      >\r\n                      <button\r\n                        *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\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\"\r\n                        appPopover\r\n                        (click)=\"userList.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"user?.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', user)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER(S)</span\r\n                      >\r\n                      <button\r\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\"\r\n                        appPopover\r\n                        (click)=\"userCount.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span\r\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \"\r\n                      >&</span\r\n                    >\r\n                    <div\r\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n                      id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER GROUP(S)</span\r\n                      >\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover\r\n                        (click)=\"groupCount.popover()\"\r\n                        placement=\"right\"\r\n                      >\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.group_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('whoCanViewGroup', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\r\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\"\r\n                    (click)=\"activateSelector('whoCanView', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'rcList'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RESPONSIBILITY CENTER(S)</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('rc', rc)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rc.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rc.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rcList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                          .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rc?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('rc', rc)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'rcList'\"\r\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\"\r\n                    (click)=\"activateSelector('rcList', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >PROGRAM</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rCategory.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCategories\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rCategoryList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                          1\r\n                        ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rCategory?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rCategory?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Risk Category -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'riskCategories'\"\r\n            *ngIf=\"showRiskCategory && isManageRisk\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'riskCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n                  activeSelector === 'riskCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n                  activeSelector !== 'riskCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\" *ngIf=\"isManageRisk\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RISK CATEGORIES</label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('riskCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Risk Categories that you would like displayed<br />in\r\n                    the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('riskCategory', riskCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"riskCategory.category_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ riskCategory.category_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"riskList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let riskCategory of dashboardForm?.selectedRiskCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"riskCategory?.category_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('riskCategory', riskCategory)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ riskCategory?.category_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('riskCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Display Criteria -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >DISPLAY CRITERIA</label\r\n                >\r\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n                  >\r\n                    Those Items that have been assigned to either the selected\r\n                    Responsibility Center(s) or the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n                  >\r\n                    Those Items that have been assigned to both the selected\r\n                    Responsibility Center(s) and the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeframe -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >TIMEFRAME</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >Select how long you would like the information selected to be\r\n                  displayed for. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label\r\n                >\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'From'\"\r\n                      (click)=\"openFromDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #fromDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"fromDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeFromDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    class=\"date-select\"\r\n                    *ngIf=\"!hideToDate\"\r\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n                  >\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'To'\"\r\n                      (click)=\"openToDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #toDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"toDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeToDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                </div>\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \"\r\n                >\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\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\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\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\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button\r\n            class=\"vx-btn block primary\"\r\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\"\r\n          >\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"close-dialog\"\r\n        type=\"button\"\r\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\"\r\n        [arTooltip]=\"'[Esc] to close'\"\r\n        placement=\"left\"\r\n        type=\"black\"\r\n        delay=\"0\"\r\n        [tooltipMandatory]=\"true\"\r\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n      >\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div\r\n        class=\"global-confirmation-alert\"\r\n        *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n          dashboardForm?.selectedRiskCategories?.length == 0\r\n        \"\r\n      >\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center, Program or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center or Program.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog\r\n  *ngIf=\"isSmiley\"\r\n  [message]=\"smileyMessage\"\r\n></app-smiley-dialog>\r\n\r\n<app-configure-widgets\r\n  *ngIf=\"openConfigureWidgets\"\r\n  [mode]=\"mode\"\r\n  [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\"\r\n  [showCompliance]=\"showComplianceWidgets\"\r\n  [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\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}::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}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div\r\n    class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n    [class.animate-slideInRight]=\"animation\"\r\n  >\r\n    <div\r\n      class=\"more-option\"\r\n      *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-user-list\r\n        *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n        (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\"\r\n        [totalList]=\"totalList\"\r\n        [listDetails]=\"listDetails\"\r\n        [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"\r\n      ></app-user-list>\r\n      <app-responsibility-center\r\n        *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\"\r\n        [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \"\r\n        [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\"\r\n      >\r\n      </app-responsibility-center>\r\n      <app-categories\r\n        *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\"\r\n        [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-categories>\r\n      <app-risk-categories\r\n        *ngIf=\"activeSelector === 'riskCategories'\"\r\n        [categoryList]=\"riskCategoryList\"\r\n        [allCategories]=\"allRiskCategories\"\r\n        [categoryIdKey]=\"'category_id'\"\r\n        [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n        (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n        (closeCategoriesList)=\"activateSelector('', false)\"\r\n      ></app-risk-categories>\r\n\r\n      <app-frequency\r\n        *ngIf=\"activeSelector === 'frequency'\"\r\n        (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n        (saveFrequency)=\"saveFrequency($event)\"\r\n        [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n        [selectedDate]=\"dashboardForm.frequencyDate\"\r\n        [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n      >\r\n      </app-frequency>\r\n    </div>\r\n    <div\r\n      class=\"vx-dialog-container side-dialog\"\r\n      [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div\r\n          class=\"vx-dialog-body-container\"\r\n          (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n        >\r\n          <!-- Dashboard Name -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n                *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Dashboard Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div class=\"vx-input-group\">\r\n                  <input\r\n                    class=\"textField\"\r\n                    placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\"\r\n                    (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\"\r\n                    (focusout)=\"activateSelector('name', false)\"\r\n                  />\r\n\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n                    >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \"\r\n                >\r\n                  {{\r\n                    dashboardForm.dashboardName.length > 30\r\n                      ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                      : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor\r\n                    [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n                  ></vcomply-editor>\r\n                  <span\r\n                    class=\"counter\"\r\n                    *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n                    >{{\r\n                      250 -\r\n                        (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span\r\n                  >\r\n                </div>\r\n\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \"\r\n                >\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Who -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'whoCanView'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                class=\"checkIcon\"\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >Who can view this dashboard?<span\r\n                    class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n                    >*</span\r\n                  ></label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                      *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \"\r\n                    >\r\n                      <i\r\n                        class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                        *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \"\r\n                        (click)=\"remove('whoCanView', user)\"\r\n                        >&#xe9ae;</i\r\n                      >\r\n                      <span\r\n                        class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                        >{{ user.member_name }}</span\r\n                      >\r\n                      <button\r\n                        *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\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\"\r\n                        appPopover\r\n                        (click)=\"userList.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"user?.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', user)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER(S)</span\r\n                      >\r\n                      <button\r\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\"\r\n                        appPopover\r\n                        (click)=\"userCount.popover()\"\r\n                        placement=\"left\"\r\n                      >\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span\r\n                      class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \"\r\n                      >&</span\r\n                    >\r\n                    <div\r\n                      *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n                      id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    >\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n                        >USER GROUP(S)</span\r\n                      >\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover\r\n                        (click)=\"groupCount.popover()\"\r\n                        placement=\"right\"\r\n                      >\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.member_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \"\r\n                                  (click)=\"remove('whoCanView', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"data.group_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('whoCanViewGroup', data)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'whoCanView'\"\r\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\"\r\n                    (click)=\"activateSelector('whoCanView', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'rcList'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RESPONSIBILITY CENTER(S)</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('rc', rc)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rc.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rc.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rcList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                          .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rc?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('rc', rc)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'rcList'\"\r\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\"\r\n                    (click)=\"activateSelector('rcList', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >PROGRAM</label\r\n                >\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n                  \"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n                  \"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ rCategory.item_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCategories\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"rCategoryList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedResponsibilityCategories?.slice(\r\n                          1\r\n                        ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"rCategory?.item_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ rCategory?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Risk Category -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'riskCategories'\"\r\n            *ngIf=\"showRiskCategory && isManageRisk\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'riskCategories' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n                  activeSelector === 'riskCategories'\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n                  activeSelector !== 'riskCategories'\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\" *ngIf=\"isManageRisk\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >RISK CATEGORIES</label\r\n                >\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('riskCategories', true)\"\r\n                  [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    dashboardForm?.selectedResponsibilityCategories?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Select the Risk Categories that you would like displayed<br />in\r\n                    the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                    *ngFor=\"\r\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \"\r\n                  >\r\n                    <i\r\n                      class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('riskCategory', riskCategory)\"\r\n                      >&#xe9ae;</i\r\n                    >\r\n                    <span\r\n                      class=\"chipName vx-fs-11 vx-label-txt\"\r\n                      [arTooltip]=\"riskCategory.category_name\"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                      >{{ riskCategory.category_name }}</span\r\n                    >\r\n                    <button\r\n                      *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover\r\n                      (click)=\"riskList.popover()\"\r\n                      placement=\"left\"\r\n                    >\r\n                      +{{\r\n                        dashboardForm?.selectedRiskCategories?.slice(1).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li\r\n                            *ngFor=\"\r\n                              let riskCategory of dashboardForm?.selectedRiskCategories\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \"\r\n                          >\r\n                            <div class=\"avatar-card\">\r\n                              <span\r\n                                class=\"value\"\r\n                                [arTooltip]=\"riskCategory?.category_name\"\r\n                                placement=\"bottom-left\"\r\n                                delay=\"0\"\r\n                                type=\"black\"\r\n                                [tooltipMandatory]=\"false\"\r\n                              >\r\n                                <i\r\n                                  class=\"icons cross-icon\"\r\n                                  (click)=\"remove('riskCategory', riskCategory)\"\r\n                                  >&#xe90d;</i\r\n                                >\r\n                                {{ riskCategory?.category_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button\r\n                    *ngIf=\"activeSelector !== 'riskCategories'\"\r\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\"\r\n                    (click)=\"activateSelector('riskCategories', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Display Criteria -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >DISPLAY CRITERIA</label\r\n                >\r\n                <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n                  >\r\n                    Those Items that have been assigned to either the selected\r\n                    Responsibility Center(s) or the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n\r\n                  <app-cs-radio\r\n                    [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n                    (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n                  >\r\n                    Those Items that have been assigned to both the selected\r\n                    Responsibility Center(s) and the selected\r\n                    Categories.</app-cs-radio\r\n                  >\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeframe -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\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\"\r\n                  >TIMEFRAME</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >Select how long you would like the information selected to be\r\n                  displayed for. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label\r\n                >\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"from_date\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'From'\"\r\n                      (click)=\"openFromDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #fromDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"fromDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeFromDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    class=\"date-select\"\r\n                    *ngIf=\"!hideToDate\"\r\n                    [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n                  >\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"to_date\"\r\n                      [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \"\r\n                      [placeholder]=\"'To'\"\r\n                      (click)=\"openToDatePicker()\"\r\n                      readonly\r\n                    />\r\n                    <dp-date-picker\r\n                      #toDatePicker\r\n                      [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                      placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \"\r\n                      [config]=\"toDatePickerConfig\"\r\n                    ></dp-date-picker>\r\n                    <div\r\n                      class=\"overlay\"\r\n                      (click)=\"closeToDatePicker()\"\r\n                      *ngIf=\"datePickerOverlay\"\r\n                    ></div>\r\n                  </div>\r\n                </div>\r\n                <p\r\n                  class=\"vx-txt-error\"\r\n                  [appScrollInView]=\"true\"\r\n                  *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \"\r\n                >\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n                alt=\"\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\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\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\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\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button\r\n            class=\"vx-btn block primary\"\r\n            [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\"\r\n          >\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        class=\"close-dialog\"\r\n        type=\"button\"\r\n        [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\"\r\n        [arTooltip]=\"'[Esc] to close'\"\r\n        placement=\"left\"\r\n        type=\"black\"\r\n        delay=\"0\"\r\n        [tooltipMandatory]=\"true\"\r\n        [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n      >\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div\r\n        class=\"global-confirmation-alert\"\r\n        *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n          dashboardForm?.selectedRiskCategories?.length == 0\r\n        \"\r\n      >\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center, Program or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center or Program.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog\r\n  *ngIf=\"isSmiley\"\r\n  [message]=\"smileyMessage\"\r\n></app-smiley-dialog>\r\n\r\n<app-configure-widgets\r\n  *ngIf=\"openConfigureWidgets\"\r\n  [mode]=\"mode\"\r\n  [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\"\r\n  [showCompliance]=\"showComplianceWidgets\"\r\n  [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
         }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{
@@ -4217,9 +4271,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['toDatePicker']
             }], configureWidget: [{
                 type: Input
+            }], fromDatePickerPopup: [{
+                type: ViewChild,
+                args: ['fromDatePicker', { read: ElementRef, static: false }]
+            }], toDatePickerPopup: [{
+                type: ViewChild,
+                args: ['toDatePicker', { read: ElementRef, static: false }]
             }], onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
+            }], documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class SafeHtmlPipe {