vc-create-dashboard 2.2.6 → 2.3.0

package/fesm2015/create-dashboard.js

@@ -414,13 +414,28 @@ ConfigureWidgetsService.ctorParameters = () => [
     { type: Configurations, decorators: [{ type: Optional }] }
 ];
 
+class PopoverService {
+    constructor() {
+        this.stopScroll = false;
+        console.log(this.popoverHeight);
+    }
+}
+PopoverService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PopoverService_Factory() { return new PopoverService(); }, token: PopoverService, providedIn: "root" });
+PopoverService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+PopoverService.ctorParameters = () => [];
+
 dayjs.extend(customParseFormat);
 class CreateDashboardComponent {
-    constructor(createDashboardService, paginationService, cdr, snackBar, configureWidgetsService) {
+    constructor(createDashboardService, paginationService, cdr, snackBar, popoverService, configureWidgetsService) {
         this.createDashboardService = createDashboardService;
         this.paginationService = paginationService;
         this.cdr = cdr;
         this.snackBar = snackBar;
+        this.popoverService = popoverService;
         this.configureWidgetsService = configureWidgetsService;
         this.activeSelector = '';
         this.disabled = false;
@@ -1227,8 +1242,8 @@ class CreateDashboardComponent {
 CreateDashboardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-create-dashboard',
-                template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\"></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n                                    limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        dashboardForm?.dashboardDescriptionText.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n                                        class=\"required\">*</span></label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\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=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\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                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\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 type=\"text\"\r\n                                            [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n                <i class=\"icons\">&#xeabe;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\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\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\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\">OKAY</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 *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
-                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/forms/forms.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::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:initial;position:relative;border-radius:0 0 0 30px;background:#0000}::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 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 input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-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 .select:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select: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 .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{display:flex!important}::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 .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:#0000;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{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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::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:unset;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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left: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:#0000;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:#0000;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:#0000;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:5px}.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:#0000;color:#fff;border-color:#fff}"]
+                template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\"></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n                                    limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        dashboardForm?.dashboardDescriptionText.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n                                        class=\"required\">*</span></label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\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 *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\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                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n                                <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container\">\r\n                                            <span class=\"chip\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\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=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\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                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\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 type=\"text\"\r\n                                            [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group\">\r\n                                <label class=\"vx-control-panel\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n                <i class=\"icons\">&#xeabe;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\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\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\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\">OKAY</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 *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/forms/forms.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::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:initial;position:relative;border-radius:0 0 0 30px;background:#0000}@-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 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 input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-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 .select:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select: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 .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{display:flex!important}::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 .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:#0000;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{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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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}::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:.3}::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:unset;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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left: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:#0000;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:#0000;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:#0000;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:5px}.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:#0000;color:#fff;border-color:#fff}"]
             },] }
 ];
 CreateDashboardComponent.ctorParameters = () => [
@@ -1236,6 +1251,7 @@ CreateDashboardComponent.ctorParameters = () => [
     { type: PaginationService },
     { type: ChangeDetectorRef },
     { type: SnackBarService },
+    { type: PopoverService },
     { type: ConfigureWidgetsService }
 ];
 CreateDashboardComponent.propDecorators = {
@@ -1500,12 +1516,6 @@ class UserListComponent {
         if (event) {
             this.vLoader = true;
             this.dashboardService.getAllUsers().subscribe((res) => {
-                // this.selectedList = [...res];
-                // const selectedData = [...res];
-                // this.footerDetails.selectedData = this.selectedList;
-                // this.selectedIds = selectedData.map((ele: any) => {
-                //   if (ele[this.listDetails.elementIdKey]) { return ele[this.listDetails.elementIdKey]; }
-                // });
                 if (res.length > 1) {
                     res.forEach((searchElement) => {
                         if (!this.selectedIds.includes(searchElement[this.listDetails.elementIdKey])) {
@@ -1519,16 +1529,6 @@ class UserListComponent {
             });
         }
         else {
-            // this.selectedList = [];
-            // this.selectedIds = [];
-            // this.footerDetails.selectedData = [];
-            // this.searchList.forEach(searchElement => {
-            //   if (!this.listDetails.nonRemovableUsersList.includes(searchElement[this.listDetails.elementIdKey])) {
-            //     this.selectedList.push(searchElement);
-            //     this.selectedIds.push(searchElement[this.listDetails.elementIdKey]);
-            //     this.footerDetails.selectedData = this.selectedList;
-            //   }
-            // });
             const selectedData = [...new Set(this.selectedList)];
             const index = selectedData.findIndex(ele => ele[this.listDetails.elementIdKey] === this.listDetails.nonRemovableUsersList[0]);
             if (index != -1) {
@@ -1609,8 +1609,6 @@ class UserListComponent {
     getUsersList(url) {
         this.vLoader = true;
         this.dashboardService.getOrganizationUsers(url ? url : '').subscribe(res => {
-            // console.log(this.selectedList,this.selectedIds)
-            // debugger
             this.searchList = res;
             this.vLoader = false;
         });
@@ -1628,7 +1626,7 @@ UserListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-user-list',
                 template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"Search User(s) who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"!searchValue\">\r\n            <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-list-body-top\">\r\n            <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n            <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"list-of-user\">\r\n            <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n                <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                        (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                        delay=\"0\" [tooltipMandatory]=\"true\"\r\n                        > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                </li>\r\n                <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n            </ul>\r\n\r\n            <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n            </app-no-data>\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n        </div>\r\n       \r\n\r\n    </div>\r\n    <div class=\"user-list-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n",
-                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .user-list{background:#fff}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 20px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 310px);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 270px)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 20px 0;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .user-list{background:#fff}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 20px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 270px)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 20px 0;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}"]
             },] }
 ];
 UserListComponent.ctorParameters = () => [
@@ -2257,7 +2255,7 @@ class FrequencyComponent {
 FrequencyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-frequency',
-                template: "<div class=\"frequency\">\r\n    <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n            <div class=\"frequency-tab-head\">\r\n                <ul class=\"navigation\">\r\n                    <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"frequency-tab-body\" >\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n                    <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                        <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n                            onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                    </div>\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n                    <ng-container *ngIf=\"showRadio\">\r\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                            <span>Day <input type=\"number\"  (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n                                onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                        </div>\r\n                        <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                            <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}} {{(selectedQuarter === quarterIndex)?'true':'false'}}</app-cs-radio>\r\n                        </div>\r\n                    </ng-container>                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails]=\"footerDetails\"\r\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n         (submitEvent)=\"submitFrequency()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>",
+                template: "<div class=\"frequency\">\r\n    <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n            <div class=\"frequency-tab-head\">\r\n                <ul class=\"navigation\">\r\n                    <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"frequency-tab-body\" >\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n                    <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                        <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n                            onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                    </div>\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n                    <ng-container *ngIf=\"showRadio\">\r\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                            <span>Day <input type=\"number\"  (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n                                onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                        </div>\r\n                        <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                            <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n                        </div>\r\n                    </ng-container>                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails]=\"footerDetails\"\r\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n         (submitEvent)=\"submitFrequency()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");::ng-deep .frequency{background:#fff}::ng-deep .frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0;padding:0 12px}::ng-deep .frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}::ng-deep .frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}::ng-deep .frequency-tab{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px #1e5dd31a;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}::ng-deep .frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul{padding:0;margin:0}::ng-deep .frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul.navigation li{list-style:none;width:auto;padding:0 28px;display:flex;justify-content:center}::ng-deep .frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:#0000;border:none;white-space:nowrap;cursor:pointer;padding:0}::ng-deep .frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}::ng-deep .frequency-tab-head ul.navigation li button.active{color:#1e5dd3}::ng-deep .frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}::ng-deep .frequency-tab-body{background:#fff}::ng-deep .frequency-tab-body .checkbox-list{border-top:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top{padding:12px 24px;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}::ng-deep .frequency-tab-body .checkbox-list .frequency-top .day-counter{-webkit-appearance:textfield;-moz-appearance:textfield;width:40px;margin:6px 8px 0;padding:0 4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;font-size:14px}::ng-deep .frequency-tab-body .checkbox-list .frequency-checkbox{padding:24px}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#747576!important;font-weight:400!important}::ng-deep .frequency-tab-body .checkbox-list.month app-cs-checkbox{width:calc(100% / 6);padding:4px 0}"]
             },] }
 ];
@@ -2852,19 +2850,6 @@ DashboardFooterComponent.propDecorators = {
     footerDetails: [{ type: Input }]
 };
 
-class PopoverService {
-    constructor() {
-        console.log(this.popoverHeight);
-    }
-}
-PopoverService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PopoverService_Factory() { return new PopoverService(); }, token: PopoverService, providedIn: "root" });
-PopoverService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-PopoverService.ctorParameters = () => [];
-
 class PopoverComponent {
     constructor(popoverService) {
         this.popoverService = popoverService;
@@ -2880,6 +2865,7 @@ class PopoverComponent {
         setTimeout(() => {
             this.getPosition();
             this.showPopover = true;
+            this.popoverService.stopScroll = true;
             // document.body.style.overflow = 'hidden';
         }, 10);
         return false;
@@ -2892,6 +2878,7 @@ class PopoverComponent {
             this.positionX = this.popoverService.positionX;
             this.positionY = this.popoverService.positionY;
             this.showPopover = true;
+            this.popoverService.stopScroll = true;
         }, 10);
         return false;
     }
@@ -2899,12 +2886,14 @@ class PopoverComponent {
         if (!this.dontCloseonClick || top === 'top') {
             this.popoverContainer = false;
             this.showPopover = false;
+            this.popoverService.stopScroll = false;
             // document.body.style.overflow = 'auto';
         }
     }
     close() {
         this.popoverContainer = false;
         this.showPopover = false;
+        this.popoverService.stopScroll = false;
     }
     clickedPopover() {
         this.getPosition();
@@ -4204,7 +4193,7 @@ class ConfigureWidgetsComponent {
 ConfigureWidgetsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-configure-widgets',
-                template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>",
+                template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#fff}::ng-deep .configure-widgets-head{height:44px;background:#fbfbfb;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:#0000;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:#0000;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:#0000;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}"]
             },] }
 ];
@@ -4531,5 +4520,5 @@ CreateDashboardModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CreateDashboardComponent, CreateDashboardModule, CreateDashboardService$1 as CreateDashboardService, CreateDashboardService as ɵa, AuthService as ɵb, SearchMultiSelectPipe as ɵba, ClickOutsideDirective as ɵbb, TooltipModule as ɵbc, ToolTipDirective as ɵbd, SelectModule as ɵbe, CsSelectComponent$1 as ɵbf, CsOptionComponent as ɵbg, CsSelectService as ɵbh, SafeHtmlPipe as ɵbi, DashboardFooterModule as ɵbj, DashboardFooterComponent as ɵbk, PopoverModule as ɵbl, PopoverComponent as ɵbm, PopoverService as ɵbn, PopoverDirective as ɵbo, PaginationModule as ɵbp, PaginationComponent as ɵbq, FloatingBarModule as ɵbr, FloatingBarComponent as ɵbs, ConfigureWidgetsModule as ɵbt, ConfigureWidgetsComponent as ɵbu, SearchPipe as ɵbv, DirectivesModule as ɵbw, ScrollInViewDirective as ɵbx, NoDataModule as ɵby, NoDataComponent as ɵbz, Configurations as ɵc, VLoaderModule as ɵca, LoaderComponent as ɵcb, LoaderInlineComponent as ɵcc, SnackBarModule as ɵcd, SnackBarComponent as ɵce, SmileyDialogModule as ɵcf, SmileyDialogComponent as ɵcg, PaginationService as ɵd, SnackBarService as ɵe, ConfigureWidgetsService as ɵf, UserListComponent as ɵg, FormGroupComponent as ɵh, DialogService as ɵi, DialogModule as ɵj, DialogComponent as ɵk, InsertionDirective as ɵl, DialogRef as ɵm, DialogConfig as ɵn, ResponsibilityCenterComponent as ɵo, CategoriesComponent as ɵp, RiskCategoriesComponent as ɵq, FrequencyComponent as ɵr, FilterPipe as ɵs, FormgroupModule as ɵt, CsCheckboxComponent as ɵu, CsRadioComponent as ɵv, CsSwitchComponent as ɵw, CsRadioGroupComponent as ɵx, CsSelectComponent as ɵy, PascalPipe as ɵz };
+export { CreateDashboardComponent, CreateDashboardModule, CreateDashboardService$1 as CreateDashboardService, CreateDashboardService as ɵa, AuthService as ɵb, PascalPipe as ɵba, SearchMultiSelectPipe as ɵbb, ClickOutsideDirective as ɵbc, TooltipModule as ɵbd, ToolTipDirective as ɵbe, SelectModule as ɵbf, CsSelectComponent$1 as ɵbg, CsOptionComponent as ɵbh, CsSelectService as ɵbi, SafeHtmlPipe as ɵbj, DashboardFooterModule as ɵbk, DashboardFooterComponent as ɵbl, PopoverModule as ɵbm, PopoverComponent as ɵbn, PopoverDirective as ɵbo, PaginationModule as ɵbp, PaginationComponent as ɵbq, FloatingBarModule as ɵbr, FloatingBarComponent as ɵbs, ConfigureWidgetsModule as ɵbt, ConfigureWidgetsComponent as ɵbu, SearchPipe as ɵbv, DirectivesModule as ɵbw, ScrollInViewDirective as ɵbx, NoDataModule as ɵby, NoDataComponent as ɵbz, Configurations as ɵc, VLoaderModule as ɵca, LoaderComponent as ɵcb, LoaderInlineComponent as ɵcc, SnackBarModule as ɵcd, SnackBarComponent as ɵce, SmileyDialogModule as ɵcf, SmileyDialogComponent as ɵcg, PaginationService as ɵd, SnackBarService as ɵe, PopoverService as ɵf, ConfigureWidgetsService as ɵg, UserListComponent as ɵh, FormGroupComponent as ɵi, DialogService as ɵj, DialogModule as ɵk, DialogComponent as ɵl, InsertionDirective as ɵm, DialogRef as ɵn, DialogConfig as ɵo, ResponsibilityCenterComponent as ɵp, CategoriesComponent as ɵq, RiskCategoriesComponent as ɵr, FrequencyComponent as ɵs, FilterPipe as ɵt, FormgroupModule as ɵu, CsCheckboxComponent as ɵv, CsRadioComponent as ɵw, CsSwitchComponent as ɵx, CsRadioGroupComponent as ɵy, CsSelectComponent as ɵz };
 //# sourceMappingURL=create-dashboard.js.map