vc-create-dashboard 2.3.4 → 2.4.1

package/bundles/create-dashboard.umd.js

@@ -769,15 +769,38 @@
     ];
     PopoverService.ctorParameters = function () { return []; };
 
+    var TextCountPipe = /** @class */ (function () {
+        function TextCountPipe() {
+        }
+        TextCountPipe.prototype.transform = function (value) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            var _a;
+            var span = document.createElement('span');
+            span.innerHTML = value;
+            console.log('span.innerHTML ==>', span.innerHTML, span.innerText.length);
+            return ((_a = span.textContent) === null || _a === void 0 ? void 0 : _a.length) || span.innerText.length;
+        };
+        return TextCountPipe;
+    }());
+    TextCountPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'textCount'
+                },] }
+    ];
+
     dayjs__namespace.extend(customParseFormat__namespace);
     var CreateDashboardComponent = /** @class */ (function () {
-        function CreateDashboardComponent(createDashboardService, paginationService, cdr, snackBar, popoverService, configureWidgetsService) {
+        function CreateDashboardComponent(createDashboardService, paginationService, cdr, snackBar, popoverService, configureWidgetsService, textCount) {
             this.createDashboardService = createDashboardService;
             this.paginationService = paginationService;
             this.cdr = cdr;
             this.snackBar = snackBar;
             this.popoverService = popoverService;
             this.configureWidgetsService = configureWidgetsService;
+            this.textCount = textCount;
             this.activeSelector = '';
             this.disabled = false;
             this.mode = 'CREATE';
@@ -1379,6 +1402,7 @@
         */
         CreateDashboardComponent.prototype.validateDashboard = function () {
             var _this = this;
+            var _a;
             setTimeout(function () {
                 _this.submitted = true;
             }, 100);
@@ -1389,7 +1413,7 @@
             this.dashboardForm.dashboardDescriptionText = description.replace(re, '').trim();
             if (!this.dashboardForm.dashboardName || this.dashboardForm.dashboardName.trim() == ''
                 || (this.dashboardForm.dashboardName.length > 30)
-                || (this.dashboardForm.dashboardDescriptionText.length > 250)
+                || (this.textCount.transform((_a = this.dashboardForm) === null || _a === void 0 ? void 0 : _a.dashboardDescriptionText) > 250)
                 || (this.dashboardForm.selectedFromDate && (!this.dashboardForm.selectedToDate))
                 || (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
                     this.dashboardForm.selectedResponsibilityCategories.length == 0 &&
@@ -1605,8 +1629,9 @@
     CreateDashboardComponent.decorators = [
         { type: i0.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()\" [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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" 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 vx-mt-2\">\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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\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 vx-fs-10 vx-fw-400 vx-mr-2\" (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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\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=\"selectbox\" *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 vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</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\");::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{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color: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{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .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;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select 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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" 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 vx-mt-2\">\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 | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\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 vx-fs-10 vx-fw-400 vx-mr-2\" (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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\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 vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\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 vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">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 vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\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=\"selectbox\" *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 vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-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 vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</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'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</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>",
+                    providers: [TextCountPipe],
+                    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\");::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{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color: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{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .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;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select 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 = function () { return [
@@ -1615,7 +1640,8 @@
         { type: i0.ChangeDetectorRef },
         { type: SnackBarService },
         { type: PopoverService },
-        { type: ConfigureWidgetsService }
+        { type: ConfigureWidgetsService },
+        { type: TextCountPipe }
     ]; };
     CreateDashboardComponent.propDecorators = {
         mode: [{ type: i0.Input }],
@@ -5008,6 +5034,7 @@
                         RiskCategoriesComponent,
                         FrequencyComponent,
                         FilterPipe,
+                        TextCountPipe,
                     ],
                     imports: [
                         common.CommonModule,
@@ -5046,65 +5073,66 @@
     exports.CreateDashboardComponent = CreateDashboardComponent;
     exports.CreateDashboardModule = CreateDashboardModule;
     exports.CreateDashboardService = CreateDashboardService$1;
-    exports.ɵa = CreateDashboardService;
-    exports.ɵb = AuthService;
-    exports.ɵba = PascalPipe;
-    exports.ɵbb = SearchMultiSelectPipe;
-    exports.ɵbc = ClickOutsideDirective;
-    exports.ɵbd = TooltipModule;
-    exports.ɵbe = ToolTipDirective;
-    exports.ɵbf = SelectModule;
-    exports.ɵbg = CsSelectComponent$1;
-    exports.ɵbh = CsOptionComponent;
-    exports.ɵbi = CsSelectService;
-    exports.ɵbj = SafeHtmlPipe;
-    exports.ɵbk = DashboardFooterModule;
-    exports.ɵbl = DashboardFooterComponent;
-    exports.ɵbm = PopoverModule;
-    exports.ɵbn = PopoverComponent;
-    exports.ɵbo = PopoverDirective;
-    exports.ɵbp = PaginationModule;
-    exports.ɵbq = PaginationComponent;
-    exports.ɵbr = FloatingBarModule;
-    exports.ɵbs = FloatingBarComponent;
-    exports.ɵbt = ConfigureWidgetsModule;
-    exports.ɵbu = ConfigureWidgetsComponent;
-    exports.ɵbv = SearchPipe;
-    exports.ɵbw = DirectivesModule;
-    exports.ɵbx = ScrollInViewDirective;
-    exports.ɵby = NoDataModule;
-    exports.ɵbz = NoDataComponent;
-    exports.ɵc = Configurations;
-    exports.ɵca = VLoaderModule;
-    exports.ɵcb = LoaderComponent;
-    exports.ɵcc = LoaderInlineComponent;
-    exports.ɵcd = SnackBarModule;
-    exports.ɵce = SnackBarComponent;
-    exports.ɵcf = SmileyDialogModule;
-    exports.ɵcg = SmileyDialogComponent;
-    exports.ɵd = PaginationService;
-    exports.ɵe = SnackBarService;
-    exports.ɵf = PopoverService;
-    exports.ɵg = ConfigureWidgetsService;
-    exports.ɵh = UserListComponent;
-    exports.ɵi = FormGroupComponent;
-    exports.ɵj = DialogService;
-    exports.ɵk = DialogModule;
-    exports.ɵl = DialogComponent;
-    exports.ɵm = InsertionDirective;
-    exports.ɵn = DialogRef;
-    exports.ɵo = DialogConfig;
-    exports.ɵp = ResponsibilityCenterComponent;
-    exports.ɵq = CategoriesComponent;
-    exports.ɵr = RiskCategoriesComponent;
-    exports.ɵs = FrequencyComponent;
-    exports.ɵt = FilterPipe;
-    exports.ɵu = FormgroupModule;
-    exports.ɵv = CsCheckboxComponent;
-    exports.ɵw = CsRadioComponent;
-    exports.ɵx = CsSwitchComponent;
-    exports.ɵy = CsRadioGroupComponent;
-    exports.ɵz = CsSelectComponent;
+    exports.ɵa = TextCountPipe;
+    exports.ɵb = CreateDashboardService;
+    exports.ɵba = CsSelectComponent;
+    exports.ɵbb = PascalPipe;
+    exports.ɵbc = SearchMultiSelectPipe;
+    exports.ɵbd = ClickOutsideDirective;
+    exports.ɵbe = TooltipModule;
+    exports.ɵbf = ToolTipDirective;
+    exports.ɵbg = SelectModule;
+    exports.ɵbh = CsSelectComponent$1;
+    exports.ɵbi = CsOptionComponent;
+    exports.ɵbj = CsSelectService;
+    exports.ɵbk = SafeHtmlPipe;
+    exports.ɵbl = DashboardFooterModule;
+    exports.ɵbm = DashboardFooterComponent;
+    exports.ɵbn = PopoverModule;
+    exports.ɵbo = PopoverComponent;
+    exports.ɵbp = PopoverDirective;
+    exports.ɵbq = PaginationModule;
+    exports.ɵbr = PaginationComponent;
+    exports.ɵbs = FloatingBarModule;
+    exports.ɵbt = FloatingBarComponent;
+    exports.ɵbu = ConfigureWidgetsModule;
+    exports.ɵbv = ConfigureWidgetsComponent;
+    exports.ɵbw = SearchPipe;
+    exports.ɵbx = DirectivesModule;
+    exports.ɵby = ScrollInViewDirective;
+    exports.ɵbz = NoDataModule;
+    exports.ɵc = AuthService;
+    exports.ɵca = NoDataComponent;
+    exports.ɵcb = VLoaderModule;
+    exports.ɵcc = LoaderComponent;
+    exports.ɵcd = LoaderInlineComponent;
+    exports.ɵce = SnackBarModule;
+    exports.ɵcf = SnackBarComponent;
+    exports.ɵcg = SmileyDialogModule;
+    exports.ɵch = SmileyDialogComponent;
+    exports.ɵd = Configurations;
+    exports.ɵe = PaginationService;
+    exports.ɵf = SnackBarService;
+    exports.ɵg = PopoverService;
+    exports.ɵh = ConfigureWidgetsService;
+    exports.ɵi = UserListComponent;
+    exports.ɵj = FormGroupComponent;
+    exports.ɵk = DialogService;
+    exports.ɵl = DialogModule;
+    exports.ɵm = DialogComponent;
+    exports.ɵn = InsertionDirective;
+    exports.ɵo = DialogRef;
+    exports.ɵp = DialogConfig;
+    exports.ɵq = ResponsibilityCenterComponent;
+    exports.ɵr = CategoriesComponent;
+    exports.ɵs = RiskCategoriesComponent;
+    exports.ɵt = FrequencyComponent;
+    exports.ɵu = FilterPipe;
+    exports.ɵv = FormgroupModule;
+    exports.ɵw = CsCheckboxComponent;
+    exports.ɵx = CsRadioComponent;
+    exports.ɵy = CsSwitchComponent;
+    exports.ɵz = CsRadioGroupComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });