vc-create-dashboard 2.1.5 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/bundles/create-dashboard.umd.js +215 -34
  2. package/bundles/create-dashboard.umd.js.map +1 -1
  3. package/create-dashboard.metadata.json +1 -1
  4. package/esm2015/lib/create-dashboard-container/categories/categories.component.js +4 -3
  5. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.js +108 -4
  6. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.ngfactory.js +17 -15
  7. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.ngsummary.json +1 -1
  8. package/esm2015/lib/create-dashboard-container/create-dashboard.component.js +81 -16
  9. package/esm2015/lib/create-dashboard-container/create-dashboard.component.ngfactory.js +2 -2
  10. package/esm2015/lib/create-dashboard-container/responsibility-center/responsibility-center.component.js +4 -3
  11. package/esm2015/lib/create-dashboard-container/services/create-dashboard.service.js +14 -3
  12. package/esm2015/lib/create-dashboard-container/services/create-dashboard.service.ngsummary.json +1 -1
  13. package/fesm2015/create-dashboard.js +206 -24
  14. package/fesm2015/create-dashboard.js.map +1 -1
  15. package/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.d.ts +10 -0
  16. package/lib/create-dashboard-container/create-dashboard.component.d.ts +1 -0
  17. package/lib/create-dashboard-container/services/create-dashboard.service.d.ts +2 -1
  18. package/package.json +1 -1
package/bundles/create-dashboard.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('moment'), require('@angular/common'), require('vcomply-editor'), require('ng2-date-picker'), require('@angular/forms'), require('nanoid'), require('@angular/platform-browser'), require('@angular/router')) :
3
- typeof define === 'function' && define.amd ? define('create-dashboard', ['exports', '@angular/core', '@angular/common/http', 'rxjs', 'rxjs/operators', 'moment', '@angular/common', 'vcomply-editor', 'ng2-date-picker', '@angular/forms', 'nanoid', '@angular/platform-browser', '@angular/router'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['create-dashboard'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.rxjs.operators, global.moment, global.ng.common, global.vcomplyEditor, global.ng2DatePicker, global.ng.forms, global.nanoid, global.ng.platformBrowser, global.ng.router));
5
- }(this, (function (exports, i0, i1, rxjs, operators, moment, common, vcomplyEditor, ng2DatePicker, forms, nanoid, platformBrowser, router) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@auth0/angular-jwt'), require('rxjs'), require('rxjs/operators'), require('moment'), require('@angular/common'), require('vcomply-editor'), require('ng2-date-picker'), require('@angular/forms'), require('nanoid'), require('@angular/platform-browser'), require('@angular/router')) :
3
+ typeof define === 'function' && define.amd ? define('create-dashboard', ['exports', '@angular/core', '@angular/common/http', '@auth0/angular-jwt', 'rxjs', 'rxjs/operators', 'moment', '@angular/common', 'vcomply-editor', 'ng2-date-picker', '@angular/forms', 'nanoid', '@angular/platform-browser', '@angular/router'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['create-dashboard'] = {}, global.ng.core, global.ng.common.http, global.angularJwt, global.rxjs, global.rxjs.operators, global.moment, global.ng.common, global.vcomplyEditor, global.ng2DatePicker, global.ng.forms, global.nanoid, global.ng.platformBrowser, global.ng.router));
5
+ }(this, (function (exports, i0, i1, angularJwt, rxjs, operators, moment, common, vcomplyEditor, ng2DatePicker, forms, nanoid, platformBrowser, router) { 'use strict';
6
6
 
7
7
  function _interopNamespace(e) {
8
8
  if (e && e.__esModule) return e;
@@ -465,8 +465,18 @@
465
465
  CreateDashboardService.prototype.updateDashboard = function (id, payload) {
466
466
  return this.http.put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions).pipe(operators.retry(2));
467
467
  };
468
- CreateDashboardService.prototype.getSubscriptionList = function () {
469
- return this.http.get(this.env.OrganizationGet + 'subscriptionList', this.httpOptions).pipe(operators.retry(2));
468
+ CreateDashboardService.prototype.getUserInformation = function () {
469
+ return this.http.get(this.env.organizationGet + 'users&id=' + this._ID(), this.httpOptions).pipe(operators.retry(2));
470
+ };
471
+ CreateDashboardService.prototype._ID = function () {
472
+ var helper = new angularJwt.JwtHelperService();
473
+ var myRawToken = localStorage.getItem('currentUser') || '{}';
474
+ var isExpired = helper === null || helper === void 0 ? void 0 : helper.isTokenExpired(myRawToken);
475
+ if (isExpired === false) {
476
+ var tokenInfo = helper === null || helper === void 0 ? void 0 : helper.decodeToken(myRawToken);
477
+ return tokenInfo._id;
478
+ }
479
+ return '';
470
480
  };
471
481
  CreateDashboardService.prototype.checkDuplicateDashboardName = function (payload) {
472
482
  return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(operators.retry(2));
@@ -820,6 +830,7 @@
820
830
  };
821
831
  this.openConfigureWidgets = false;
822
832
  this.selectedWidgets = [];
833
+ this.displayedWidgets = [];
823
834
  this.responsibilityCentersList = [];
824
835
  this.datePickerOverlay = false;
825
836
  this.dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
@@ -874,9 +885,13 @@
874
885
  this.getComplianceCategoryList();
875
886
  this.checkWhetherAllListsLoaded();
876
887
  this.getUsersList('');
877
- this.createDashboardService.getSubscriptionList().subscribe(function (res) {
878
- if (res[0].risk_flag) {
879
- _this.showRiskCategory = res[0].risk_flag;
888
+ this.createDashboardService.getUserInformation().subscribe(function (res) {
889
+ var quickLink = res.quick_link;
890
+ if (quickLink.risk) {
891
+ _this.showRiskCategory = true;
892
+ }
893
+ else {
894
+ _this.showRiskCategory = false;
880
895
  }
881
896
  }, function (error) { console.log(error); });
882
897
  this.setFrequency("2~1~0~0", 'import');
@@ -906,6 +921,14 @@
906
921
  };
907
922
  CreateDashboardComponent.prototype.closeFromDatePicker = function () {
908
923
  var _this = this;
924
+ if (!this.dashboardForm.selectedFromDate) {
925
+ this.dashboardForm.selectedToDate = undefined;
926
+ this.hideToDate = true;
927
+ setTimeout(function () {
928
+ _this.hideToDate = false;
929
+ }, 20);
930
+ return;
931
+ }
909
932
  var minToDate = this.setToDate(this.dashboardForm.selectedFromDate);
910
933
  this.toDatePickerConfig = { min: minToDate };
911
934
  var fromDate = new Date(minToDate.split('-').reverse().join('-'));
@@ -1147,14 +1170,16 @@
1147
1170
  }
1148
1171
  else {
1149
1172
  var index = _this.selectedWidgets.findIndex(function (ele) { return ele.widget_code == element.id; });
1150
- _this.selectedWidgets[index].state = 'ACTIVE';
1151
- if (_this.selectedWidgets[index].sub_widgets.length > 0) {
1152
- _this.selectedWidgets[index].sub_widgets.forEach(function (subWidgetData) {
1153
- var elementIndex = element.subWidgets.findIndex(function (ele) { return ele.id == subWidgetData.widget_code; });
1154
- if (elementIndex != -1) {
1155
- subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
1156
- }
1157
- });
1173
+ if (index != -1) {
1174
+ _this.selectedWidgets[index].state = 'ACTIVE';
1175
+ if (_this.selectedWidgets[index].sub_widgets.length > 0) {
1176
+ _this.selectedWidgets[index].sub_widgets.forEach(function (subWidgetData) {
1177
+ var elementIndex = element.subWidgets.findIndex(function (ele) { return ele.id == subWidgetData.widget_code; });
1178
+ if (elementIndex != -1) {
1179
+ subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
1180
+ }
1181
+ });
1182
+ }
1158
1183
  }
1159
1184
  }
1160
1185
  });
@@ -1163,7 +1188,7 @@
1163
1188
  if (index == -1) {
1164
1189
  savedWidget.state = 'INACTIVE';
1165
1190
  if (savedWidget.sub_widgets.length > 0) {
1166
- savedWidget.subWidgets.forEach(function (saveSubWidget) {
1191
+ savedWidget.sub_widgets.forEach(function (saveSubWidget) {
1167
1192
  saveSubWidget.state = 'INACTIVE';
1168
1193
  });
1169
1194
  }
@@ -1204,6 +1229,14 @@
1204
1229
  switch (type) {
1205
1230
  case 'rc':
1206
1231
  this.dashboardForm.selectedResponsibilityCenters = this.setList(this.responsibilityCentersList, selectedItems, 'item_id');
1232
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1233
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1234
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1235
+ }
1236
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1237
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1238
+ }
1239
+ }
1207
1240
  break;
1208
1241
  case 'whoCanView':
1209
1242
  this.dashboardForm.selectedViewers = selectedItems;
@@ -1211,28 +1244,53 @@
1211
1244
  break;
1212
1245
  case 'responsibilityCategories':
1213
1246
  this.dashboardForm.selectedResponsibilityCategories = selectedItems;
1247
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1248
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1249
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1250
+ }
1251
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1252
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1253
+ }
1254
+ }
1214
1255
  break;
1215
1256
  case 'riskCategory':
1216
1257
  this.dashboardForm.selectedRiskCategories = selectedItems;
1258
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1259
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1260
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1261
+ }
1262
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1263
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1264
+ }
1265
+ }
1217
1266
  break;
1218
1267
  }
1219
1268
  this.activateSelector('', false);
1220
1269
  };
1221
1270
  CreateDashboardComponent.prototype.remove = function (type, event, removeIndex) {
1222
1271
  var _this = this;
1272
+ var _a, _b;
1223
1273
  switch (type) {
1224
1274
  case 'rc':
1225
1275
  var rcIndex = this.dashboardForm.selectedResponsibilityCenters.findIndex(function (rc) { return rc.rc_id == event.rc_id; });
1226
1276
  if (rcIndex !== -1) {
1227
1277
  var parentRc = this.dashboardForm.selectedResponsibilityCenters[rcIndex];
1228
1278
  this.dashboardForm.selectedResponsibilityCenters.splice(rcIndex, 1);
1229
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
1279
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1230
1280
  parentRc.item_child_ids.forEach(function (childElement) {
1231
1281
  var removeIndex = _this.dashboardForm.selectedResponsibilityCenters.findIndex(function (removeElement) { return removeElement.rc_id == childElement; });
1232
1282
  _this.dashboardForm.selectedResponsibilityCenters.splice(removeIndex, 1);
1233
1283
  });
1234
1284
  }
1235
1285
  }
1286
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1287
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1288
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1289
+ }
1290
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1291
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1292
+ }
1293
+ }
1236
1294
  break;
1237
1295
  case 'whoCanView':
1238
1296
  var reviewerIndex = this.dashboardForm.selectedViewers.findIndex(function (viewer) { return viewer.member_id == event.member_id; });
@@ -1241,13 +1299,21 @@
1241
1299
  case 'responsibilityCategories':
1242
1300
  var CCcategoryIndex = this.dashboardForm.selectedResponsibilityCategories.findIndex(function (CCcategory) { return CCcategory.category_id == event.category_id; });
1243
1301
  this.dashboardForm.selectedResponsibilityCategories.splice(CCcategoryIndex, 1);
1302
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1303
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1304
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1305
+ }
1306
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1307
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1308
+ }
1309
+ }
1244
1310
  break;
1245
1311
  case 'riskCategory':
1246
1312
  var riskCategoryIndex = this.dashboardForm.selectedRiskCategories.findIndex(function (riskCategory) { return riskCategory.category_id == event.category_id; });
1247
1313
  if (riskCategoryIndex !== -1) {
1248
1314
  var parent = this.dashboardForm.selectedRiskCategories[riskCategoryIndex];
1249
1315
  this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
1250
- if ((parent === null || parent === void 0 ? void 0 : parent.child_cat_ids.length) > 0) {
1316
+ if (((_b = parent === null || parent === void 0 ? void 0 : parent.child_cat_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1251
1317
  parent.child_cat_ids.forEach(function (childElement) {
1252
1318
  var removeIndex = _this.dashboardForm.selectedRiskCategories.findIndex(function (removeElement) { return removeElement.category_id == childElement; });
1253
1319
  _this.dashboardForm.selectedRiskCategories.splice(removeIndex, 1);
@@ -1255,6 +1321,14 @@
1255
1321
  }
1256
1322
  }
1257
1323
  this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
1324
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
1325
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
1326
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'COMPLIANCE'; });
1327
+ }
1328
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
1329
+ this.selectedWidgets = this.selectedWidgets.filter(function (element) { return element.module_name != 'RISK'; });
1330
+ }
1331
+ }
1258
1332
  break;
1259
1333
  }
1260
1334
  };
@@ -1409,6 +1483,7 @@
1409
1483
  this.vLoader = false;
1410
1484
  this.dashboardForm.configureWidget = data.widget_details;
1411
1485
  this.selectedWidgets = data.widget_details.length > 0 ? __spreadArray([], __read(new Set(data.widget_details))) : [];
1486
+ this.displayedWidgets = data.all_widgets.length > 0 ? __spreadArray([], __read(new Set(data.all_widgets))) : [];
1412
1487
  this.setFrequency(data.email_summary, 'import');
1413
1488
  var minToDate = this.setToDate(data.timeframe.start_date);
1414
1489
  this.toDatePickerConfig = { min: minToDate };
@@ -1508,7 +1583,7 @@
1508
1583
  CreateDashboardComponent.decorators = [
1509
1584
  { type: i0.Component, args: [{
1510
1585
  selector: 'app-create-dashboard',
1511
- template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n dashboardForm?.dashboardDescriptionText.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n class=\"required\">*</span></label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'user'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n <i class=\"icons\">&#xeabe;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
1586
+ template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n dashboardForm?.dashboardDescriptionText.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n class=\"required\">*</span></label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'user'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n <i class=\"icons\">&#xeabe;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
1512
1587
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/forms/forms.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:50%;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:initial;position:relative;border-radius:0 0 0 30px;background:#0000}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{display:flex!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group 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.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:#0000;color:#fff;border-color:#fff}"]
1513
1588
  },] }
1514
1589
  ];
@@ -1968,6 +2043,7 @@
1968
2043
  };
1969
2044
  ResponsibilityCenterComponent.prototype.selectRc = function (rc, mode) {
1970
2045
  var _this = this;
2046
+ var _a, _b;
1971
2047
  if (this.radioSelection) {
1972
2048
  if (mode) {
1973
2049
  this.selectedIds = [];
@@ -1981,7 +2057,7 @@
1981
2057
  var rcElement = this.responsibilityCentersList.findIndex(function (ele) { return ele.item_id == rc; });
1982
2058
  if (rcElement !== -1) {
1983
2059
  var parentRc = this.responsibilityCentersList[rcElement];
1984
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
2060
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1985
2061
  parentRc.item_child_ids.forEach(function (childElement) {
1986
2062
  if (!_this.selectedIds.includes(childElement)) {
1987
2063
  _this.selectedIds.push(childElement);
@@ -1996,7 +2072,7 @@
1996
2072
  var rcElement = this.responsibilityCentersList.findIndex(function (ele) { return ele.item_id == rc; });
1997
2073
  if (rcElement !== -1) {
1998
2074
  var parentRc = this.responsibilityCentersList[rcElement];
1999
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
2075
+ if (((_b = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
2000
2076
  parentRc.item_child_ids.forEach(function (childElement) {
2001
2077
  var removeIndex = _this.selectedIds.findIndex(function (removeElement) { return removeElement == childElement; });
2002
2078
  _this.selectedIds.splice(removeIndex, 1);
@@ -2129,12 +2205,13 @@
2129
2205
  };
2130
2206
  CategoriesComponent.prototype.selectCategory = function (mode, activeTab, category) {
2131
2207
  var _this = this;
2208
+ var _a, _b;
2132
2209
  if (mode) {
2133
2210
  this.selectedIds.push(category[this.categoryIdKey]);
2134
2211
  var rcElement = this.allCategories.findIndex(function (ele) { return ele.category_id == category[_this.categoryIdKey]; });
2135
2212
  if (rcElement !== -1) {
2136
2213
  var parentRc = this.allCategories[rcElement];
2137
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids.length) > 0) {
2214
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
2138
2215
  parentRc.child_cat_ids.forEach(function (childElement) {
2139
2216
  if (!_this.selectedIds.includes(childElement)) {
2140
2217
  _this.selectedIds.push(childElement);
@@ -2149,7 +2226,7 @@
2149
2226
  var rcElement = this.allCategories.findIndex(function (ele) { return ele.category_id == category[_this.categoryIdKey]; });
2150
2227
  if (rcElement !== -1) {
2151
2228
  var parentRc = this.allCategories[rcElement];
2152
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids.length) > 0) {
2229
+ if (((_b = parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
2153
2230
  parentRc.child_cat_ids.forEach(function (childElement) {
2154
2231
  var removeIndex = _this.selectedIds.findIndex(function (removeElement) { return removeElement == childElement; });
2155
2232
  _this.selectedIds.splice(removeIndex, 1);
@@ -4083,13 +4160,17 @@
4083
4160
  this.selectedWidgets = [];
4084
4161
  this.module = 'COMPLIANCE';
4085
4162
  this.selectedWidgetsData = [];
4163
+ this.displayedWidgets = [];
4086
4164
  this.showRisk = false;
4087
4165
  this.showCompliance = false;
4166
+ this.mode = 'CREATE';
4088
4167
  this.noDataText = 'You have not configured any widgets. Click on the <strong>Configure Widgets</strong> button to begin.';
4089
4168
  this.selectedWidgetIds = [];
4090
4169
  this.subResponsibilitiesSelected = false;
4091
4170
  this.subKeyResponsibilitiesSelected = false;
4092
4171
  this.showWidgets = true;
4172
+ this.complianceWidgetsDisplayCount = 9;
4173
+ this.riskWidgetsDisplayCount = 12;
4093
4174
  this.widgetsList = {
4094
4175
  COMPLIANCE: [
4095
4176
  {
@@ -4098,6 +4179,7 @@
4098
4179
  description: 'Overview shows the performance of responsibilities and Responsibility Categories.',
4099
4180
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
4100
4181
  value: false,
4182
+ visibility: true,
4101
4183
  module: 'COMPLIANCE',
4102
4184
  subWidgets: []
4103
4185
  },
@@ -4107,6 +4189,7 @@
4107
4189
  description: 'The Responsibility Calendar shows the due dates of responsibilities in a calendar format. The responsibilities are color coded to reflect the status of the responsibilities.',
4108
4190
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-calender.png',
4109
4191
  value: false,
4192
+ visibility: true,
4110
4193
  module: 'COMPLIANCE',
4111
4194
  subWidgets: []
4112
4195
  },
@@ -4114,8 +4197,9 @@
4114
4197
  title: 'Responsibility Center Overview',
4115
4198
  id: 'responsibility_center_overview_flag',
4116
4199
  description: 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
4117
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
4200
+ widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-center-overview.png',
4118
4201
  value: false,
4202
+ visibility: true,
4119
4203
  module: 'COMPLIANCE',
4120
4204
  subWidgets: []
4121
4205
  },
@@ -4126,22 +4210,26 @@
4126
4210
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/my-responsibilities.png',
4127
4211
  tabOption: true,
4128
4212
  value: false,
4213
+ visibility: true,
4129
4214
  module: 'COMPLIANCE',
4130
4215
  subWidgets: [
4131
4216
  {
4132
4217
  title: 'My Responsibilities',
4133
4218
  id: 'my_responsibility_flag',
4134
4219
  value: false,
4220
+ visibility: true,
4135
4221
  },
4136
4222
  {
4137
4223
  title: 'I’m Reviewing',
4138
4224
  id: 'reviewer_responsibility_flag',
4139
4225
  value: false,
4226
+ visibility: true,
4140
4227
  },
4141
4228
  {
4142
4229
  title: 'I’m Overseeing',
4143
4230
  id: 'cc_responsibility_flag',
4144
4231
  value: false,
4232
+ visibility: true,
4145
4233
  }
4146
4234
  ]
4147
4235
  },
@@ -4152,27 +4240,32 @@
4152
4240
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/key-responsibilities.png',
4153
4241
  tabOption: true,
4154
4242
  value: false,
4243
+ visibility: true,
4155
4244
  module: 'COMPLIANCE',
4156
4245
  subWidgets: [
4157
4246
  {
4158
4247
  title: 'Overview',
4159
4248
  id: 'key_responsibilities_overview_flag',
4160
4249
  value: false,
4250
+ visibility: true,
4161
4251
  },
4162
4252
  {
4163
4253
  title: 'My Responsibilities',
4164
4254
  id: 'key_my_responsibilities_flag',
4165
4255
  value: false,
4256
+ visibility: true,
4166
4257
  },
4167
4258
  {
4168
4259
  title: 'I’m Reviewing',
4169
4260
  id: 'key_i_am_reviewing_flag',
4170
4261
  value: false,
4262
+ visibility: true,
4171
4263
  },
4172
4264
  {
4173
4265
  title: 'I’m Overseeing',
4174
4266
  id: 'key_i_am_overseeing_flag',
4175
4267
  value: false,
4268
+ visibility: true,
4176
4269
  }
4177
4270
  ]
4178
4271
  },
@@ -4182,6 +4275,7 @@
4182
4275
  description: 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
4183
4276
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/trend-analysis.png',
4184
4277
  value: false,
4278
+ visibility: true,
4185
4279
  module: 'COMPLIANCE',
4186
4280
  subWidgets: []
4187
4281
  },
@@ -4191,6 +4285,7 @@
4191
4285
  description: 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
4192
4286
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/workroom-updates.png',
4193
4287
  value: false,
4288
+ visibility: true,
4194
4289
  module: 'COMPLIANCE',
4195
4290
  subWidgets: []
4196
4291
  },
@@ -4200,6 +4295,7 @@
4200
4295
  description: 'This is a chronological view of the recent updates of responsibilities.',
4201
4296
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/recent-activities.png',
4202
4297
  value: false,
4298
+ visibility: true,
4203
4299
  module: 'COMPLIANCE',
4204
4300
  subWidgets: []
4205
4301
  },
@@ -4209,6 +4305,7 @@
4209
4305
  description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
4210
4306
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/exception-summary.png',
4211
4307
  value: false,
4308
+ visibility: true,
4212
4309
  module: 'COMPLIANCE',
4213
4310
  subWidgets: []
4214
4311
  }
@@ -4220,6 +4317,7 @@
4220
4317
  description: 'This widget shows the number and percentage of risks within each risk response strategy.',
4221
4318
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-overview.png',
4222
4319
  value: false,
4320
+ visibility: true,
4223
4321
  module: 'RISK',
4224
4322
  subWidgets: []
4225
4323
  },
@@ -4229,27 +4327,32 @@
4229
4327
  description: 'This widget shows the number of risks within each risk appetite, the number of risks that exceed the risk appetite, the number of risks that exceed the risk tolerance, the number of risks within each risk rating, and the number of risks that do not have any linked controls.',
4230
4328
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
4231
4329
  value: false,
4330
+ visibility: true,
4232
4331
  module: 'RISK',
4233
4332
  subWidgets: [
4234
4333
  {
4235
4334
  title: 'Risk Appetite & Tolerance',
4236
4335
  id: 'risk_appetite_tolerance',
4237
4336
  value: false,
4337
+ visibility: true,
4238
4338
  },
4239
4339
  {
4240
4340
  title: 'Risk Ratings',
4241
4341
  id: 'risk_ratings',
4242
4342
  value: false,
4343
+ visibility: true,
4243
4344
  },
4244
4345
  {
4245
4346
  title: 'Risks Without Controls',
4246
4347
  id: 'risks_without_controls',
4247
4348
  value: false,
4349
+ visibility: true,
4248
4350
  },
4249
4351
  {
4250
4352
  title: 'Exceeds Risk Tolerance',
4251
4353
  id: 'exceeds_risk_tolerance',
4252
4354
  value: false,
4355
+ visibility: true,
4253
4356
  },
4254
4357
  ]
4255
4358
  },
@@ -4259,6 +4362,7 @@
4259
4362
  description: 'This widget shows the number of risks within each inherent risk rating, grouped according to the Responsibility Center exposed to the risk.',
4260
4363
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-RC.png',
4261
4364
  value: false,
4365
+ visibility: true,
4262
4366
  module: 'RISK',
4263
4367
  subWidgets: []
4264
4368
  },
@@ -4268,6 +4372,7 @@
4268
4372
  description: 'This widget shows the number of risks within each residual risk rating, grouped according to the Responsibility Center exposed to the risk.',
4269
4373
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-RC.png',
4270
4374
  value: false,
4375
+ visibility: true,
4271
4376
  module: 'RISK',
4272
4377
  subWidgets: []
4273
4378
  },
@@ -4277,6 +4382,7 @@
4277
4382
  description: 'This widgets shows the number of risks within each status, grouped according to the Risk Category the risk is assigned to.',
4278
4383
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-category-overview.png',
4279
4384
  value: false,
4385
+ visibility: true,
4280
4386
  module: 'RISK',
4281
4387
  subWidgets: []
4282
4388
  },
@@ -4286,6 +4392,7 @@
4286
4392
  description: 'The Risk Heatmap displays the risk matrix for any two risk factors.',
4287
4393
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-heatmap.png',
4288
4394
  value: false,
4395
+ visibility: true,
4289
4396
  module: 'RISK',
4290
4397
  subWidgets: []
4291
4398
  },
@@ -4295,6 +4402,7 @@
4295
4402
  description: 'This widget shows the number of risks within each inherent risk rating, grouped according to the Risk Category that the risk is assigned to.',
4296
4403
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-categories.png',
4297
4404
  value: false,
4405
+ visibility: true,
4298
4406
  module: 'RISK',
4299
4407
  subWidgets: []
4300
4408
  },
@@ -4304,6 +4412,7 @@
4304
4412
  description: 'This widget shows the number of risks within each residual risk rating, grouped according to the Risk Category that the risk is assigned to.',
4305
4413
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-categories.png',
4306
4414
  value: false,
4415
+ visibility: true,
4307
4416
  module: 'RISK',
4308
4417
  subWidgets: []
4309
4418
  },
@@ -4313,6 +4422,7 @@
4313
4422
  description: 'This widget is a graphical representation of the number of risks within each inherent risk rating, grouped according to the Responsibility Center exposed to the risk.',
4314
4423
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
4315
4424
  value: false,
4425
+ visibility: true,
4316
4426
  module: 'RISK',
4317
4427
  subWidgets: []
4318
4428
  },
@@ -4322,6 +4432,7 @@
4322
4432
  description: 'This widget is a graphical representation of the number of risks within each residual risk rating, grouped according to the Responsibility Center exposed to the risk.',
4323
4433
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
4324
4434
  value: false,
4435
+ visibility: true,
4325
4436
  module: 'RISK',
4326
4437
  subWidgets: []
4327
4438
  },
@@ -4331,6 +4442,7 @@
4331
4442
  description: 'This widgets is a trend chart that shows the inherent and residual risk rating trend across the different Risk Categories.',
4332
4443
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
4333
4444
  value: false,
4445
+ visibility: true,
4334
4446
  module: 'RISK',
4335
4447
  subWidgets: []
4336
4448
  },
@@ -4340,6 +4452,7 @@
4340
4452
  description: 'This widgets shows ths top five risks with the highest risk rating.',
4341
4453
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/5-risk-ratings.png',
4342
4454
  value: false,
4455
+ visibility: true,
4343
4456
  module: 'RISK',
4344
4457
  subWidgets: []
4345
4458
  }
@@ -4348,20 +4461,68 @@
4348
4461
  }
4349
4462
  ConfigureWidgetsComponent.prototype.ngOnChanges = function () {
4350
4463
  var _this = this;
4464
+ if (this.mode == 'EDIT') {
4465
+ this.setWidgetsVisibilityToFalse();
4466
+ this.riskWidgetsDisplayCount = 0;
4467
+ this.complianceWidgetsDisplayCount = 0;
4468
+ var finalData = __spreadArray([], __read(new Set(this.displayedWidgets)));
4469
+ finalData.forEach(function (element, index) {
4470
+ _this.widgetsList.COMPLIANCE.forEach(function (ele) {
4471
+ if (ele.id == element.widget_code) {
4472
+ ele.visibility = true;
4473
+ if (ele.subWidgets.length > 0) {
4474
+ var filterData_1 = [];
4475
+ element.sub_widgets.filter(function (subwidget) {
4476
+ filterData_1.push(subwidget.widget_code);
4477
+ });
4478
+ ele.subWidgets.forEach(function (subElement, subIndex) {
4479
+ if (filterData_1.includes(subElement.id)) {
4480
+ ele.subWidgets[subIndex].visibility = true;
4481
+ }
4482
+ else {
4483
+ ele.subWidgets[subIndex].visibility = false;
4484
+ }
4485
+ });
4486
+ }
4487
+ _this.complianceWidgetsDisplayCount++;
4488
+ }
4489
+ });
4490
+ _this.widgetsList.RISK.forEach(function (ele) {
4491
+ if (ele.id == element.widget_code) {
4492
+ ele.visibility = true;
4493
+ if (ele.subWidgets.length > 0) {
4494
+ var filterData_2 = [];
4495
+ element.sub_widgets.filter(function (subwidget) {
4496
+ filterData_2.push(subwidget.widget_code);
4497
+ });
4498
+ ele.subWidgets.forEach(function (subElement, subIndex) {
4499
+ if (filterData_2.includes(subElement.id)) {
4500
+ ele.subWidgets[subIndex].visibility = true;
4501
+ }
4502
+ else {
4503
+ ele.subWidgets[subIndex].visibility = false;
4504
+ }
4505
+ });
4506
+ }
4507
+ _this.riskWidgetsDisplayCount++;
4508
+ }
4509
+ });
4510
+ });
4511
+ }
4351
4512
  var data = __spreadArray([], __read(new Set(this.selectedWidgetsData)));
4352
4513
  data.forEach(function (element, index) {
4353
4514
  _this.widgetsList.COMPLIANCE.forEach(function (ele) {
4354
4515
  if (ele.id == element.widget_code && element.state == 'ACTIVE') {
4355
4516
  ele.value = true;
4356
4517
  if (ele.subWidgets.length > 0) {
4357
- var filterData_1 = [];
4518
+ var filterData_3 = [];
4358
4519
  element.sub_widgets.filter(function (subwidget) {
4359
4520
  if (subwidget.state == 'ACTIVE') {
4360
- filterData_1.push(subwidget.widget_code);
4521
+ filterData_3.push(subwidget.widget_code);
4361
4522
  }
4362
4523
  });
4363
4524
  ele.subWidgets.forEach(function (subElement, subIndex) {
4364
- if (filterData_1.includes(subElement.id)) {
4525
+ if (filterData_3.includes(subElement.id)) {
4365
4526
  ele.subWidgets[subIndex].value = true;
4366
4527
  }
4367
4528
  else {
@@ -4376,14 +4537,14 @@
4376
4537
  if (ele.id == element.widget_code && element.state == 'ACTIVE') {
4377
4538
  ele.value = true;
4378
4539
  if (ele.subWidgets.length > 0) {
4379
- var filterData_2 = [];
4540
+ var filterData_4 = [];
4380
4541
  element.sub_widgets.filter(function (subwidget) {
4381
4542
  if (subwidget.state == 'ACTIVE') {
4382
- filterData_2.push(subwidget.widget_code);
4543
+ filterData_4.push(subwidget.widget_code);
4383
4544
  }
4384
4545
  });
4385
4546
  ele.subWidgets.forEach(function (subElement, subIndex) {
4386
- if (filterData_2.includes(subElement.id)) {
4547
+ if (filterData_4.includes(subElement.id)) {
4387
4548
  ele.subWidgets[subIndex].value = true;
4388
4549
  }
4389
4550
  else {
@@ -4475,12 +4636,30 @@
4475
4636
  this.dialog.close();
4476
4637
  this.closeConfigureWidgets.emit(false);
4477
4638
  };
4639
+ ConfigureWidgetsComponent.prototype.setWidgetsVisibilityToFalse = function () {
4640
+ this.widgetsList.COMPLIANCE.forEach(function (ele) {
4641
+ ele.visibility = false;
4642
+ if (ele.subWidgets.length > 0) {
4643
+ ele.subWidgets.forEach(function (subElement) {
4644
+ subElement.visibility = false;
4645
+ });
4646
+ }
4647
+ });
4648
+ this.widgetsList.RISK.forEach(function (ele) {
4649
+ ele.visibility = false;
4650
+ if (ele.subWidgets.length > 0) {
4651
+ ele.subWidgets.forEach(function (subElement) {
4652
+ subElement.visibility = false;
4653
+ });
4654
+ }
4655
+ });
4656
+ };
4478
4657
  return ConfigureWidgetsComponent;
4479
4658
  }());
4480
4659
  ConfigureWidgetsComponent.decorators = [
4481
4660
  { type: i0.Component, args: [{
4482
4661
  selector: 'app-configure-widgets',
4483
- template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\"><button>Compliance<span>{{widgetsList?.COMPLIANCE?.length}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button (click)=\"module='RISK'\">Risks<span>{{widgetsList?.RISK?.length}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <div class=\"configure-widgets-item\" *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" \r\n [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\"> \r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button class=\"configure-widgets-item-button add\" (click)=\"selectWidget(true,module,widget.id) \" >+ ADD</button>\r\n <button class=\"configure-widgets-item-button remove\" (click)=\"selectWidget(false,module,widget.id) \" >- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <app-cs-checkbox \r\n *ngFor=\"let subWidget of widget.subWidgets\" \r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\" \r\n [ngValue]=\"subWidget.value\"\r\n >{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </div>\r\n \r\n </div>\r\n </label>\r\n </div>\r\n <!-- No Data Image -->\r\n \r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n \r\n <floating-bar \r\n (submitEvent)=\"onNextClick()\" \r\n (cancelEvent)=\"closeConfigureDashboard()\" \r\n [selectedData]=\"selectedWidgets\"\r\n (deleteEvent)=\"removeWidget($event)\"\r\n ></floating-bar>\r\n</div>",
4662
+ template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>",
4484
4663
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#fff}::ng-deep .configure-widgets-head{height:44px;background:#fbfbfb;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:#0000;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:#0000;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:#0000;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}"]
4485
4664
  },] }
4486
4665
  ];
@@ -4493,8 +4672,10 @@
4493
4672
  widgetsDataModified: [{ type: i0.Output }],
4494
4673
  closeConfigureWidgets: [{ type: i0.Output }],
4495
4674
  selectedWidgetsData: [{ type: i0.Input }],
4675
+ displayedWidgets: [{ type: i0.Input }],
4496
4676
  showRisk: [{ type: i0.Input }],
4497
- showCompliance: [{ type: i0.Input }]
4677
+ showCompliance: [{ type: i0.Input }],
4678
+ mode: [{ type: i0.Input }]
4498
4679
  };
4499
4680
 
4500
4681
  var ScrollInViewDirective = /** @class */ (function () {