vc-create-dashboard 3.0.73 → 3.0.80

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 (16) hide show
  1. package/esm2022/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +207 -206
  2. package/esm2022/lib/create-dashboard-container/configure-widgets/configure-widgets/widget.interface.mjs +1 -1
  3. package/esm2022/lib/create-dashboard-container/constants/assets.constant.mjs +2 -1
  4. package/esm2022/lib/create-dashboard-container/create-dashboard.component.mjs +3 -3
  5. package/esm2022/lib/create-dashboard-container/services/configure-widgets.service.mjs +72 -80
  6. package/fesm2022/vc-create-dashboard.mjs +280 -286
  7. package/fesm2022/vc-create-dashboard.mjs.map +1 -1
  8. package/lib/create-dashboard-container/categories/categories.component.d.ts +1 -0
  9. package/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.d.ts +28 -1
  10. package/lib/create-dashboard-container/configure-widgets/configure-widgets/widget.interface.d.ts +1 -1
  11. package/lib/create-dashboard-container/constants/assets.constant.d.ts +1 -0
  12. package/lib/create-dashboard-container/responsibility-center/responsibility-center.component.d.ts +1 -0
  13. package/lib/create-dashboard-container/risk-categories/risk-categories.component.d.ts +1 -0
  14. package/lib/create-dashboard-container/services/configure-widgets.service.d.ts +16 -1
  15. package/lib/create-dashboard-container/user-list/user-list.component.d.ts +1 -0
  16. package/package.json +1 -1
package/fesm2022/vc-create-dashboard.mjs CHANGED
@@ -82,6 +82,7 @@ const ASSETS = {
82
82
  residual_trend: `${BASE_URL}/libraries/configure-widget/assets/images/residual-trend.png`,
83
83
  risk_trend: `${BASE_URL}/libraries/configure-widget/assets/images/risk-trend.png`,
84
84
  policyApproverView: `${BASE_URL}/policy/images/policy-approver-view.svg`,
85
+ responsibilitiesByAssignee: `${BASE_URL}/libraries/configure-widget/assets/images/responsibilitiesByAssignee.png`,
85
86
  };
86
87
 
87
88
  class Configurations {
@@ -346,82 +347,73 @@ class ConfigureWidgetsService {
346
347
  this.env = config.envConfig;
347
348
  }
348
349
  }
349
- // complianceWidgetsData = [
350
- // {
351
- // title: 'Overview',
352
- // id: 'overview_flag',
353
- // description:
354
- // 'Displays all responsibilities that have been assigned to you.',
355
- // widgetImage: ASSETS.overviewWidget,
356
- // value: 0,
357
- // },
358
- // {
359
- // title: 'Responsibility Calendar',
360
- // id: 'compliance_calendar_flag',
361
- // description:
362
- // 'Displays all responsibilities that are due on a particular day.',
363
- // widgetImage: ASSETS.responsibilityCalenderWidget,
364
- // value: 0,
365
- // },
366
- // {
367
- // title: 'Responsibility Center Overview',
368
- // id: 'responsibility_center_overview_flag',
369
- // description:
370
- // 'Displays all responsibilities that have been assigned to you.',
371
- // widgetImage: ASSETS.overviewWidget,
372
- // value: 0,
373
- // },
374
- // {
375
- // title: 'My Responsibilities',
376
- // id: 'my_responsibilities',
377
- // description:
378
- // 'Displays all responsibilities that have been assigned to you.',
379
- // widgetImage: ASSETS.myResponsibilitiesWidget,
380
- // tabOption: true,
381
- // value: 0,
382
- // },
383
- // {
384
- // title: 'Key Responsibilities',
385
- // id: 'key_responsibilities',
386
- // description:
387
- // 'Displays all responsibilities that are due on a particular day.',
388
- // widgetImage: ASSETS.keyResponsibilitiesWidget,
389
- // tabOption: true,
390
- // value: 0,
391
- // },
392
- // {
393
- // title: 'Trend Analysis',
394
- // id: 'trend_analysis_flag',
395
- // description:
396
- // 'Displays all responsibilities that have been assigned to you.',
397
- // widgetImage: ASSETS.trendAnalysisWidget,
398
- // value: 0,
399
- // },
400
- // {
401
- // title: 'Workroom Updates',
402
- // id: 'workroom_alert_flag',
403
- // description:
404
- // 'Displays all responsibilities that have been assigned to you.',
405
- // widgetImage: ASSETS.workroomUpdatesWidget,
406
- // value: 0,
407
- // },
408
- // {
409
- // title: 'Recent Activities',
410
- // id: 'recent_activity_flag',
411
- // description:
412
- // 'Displays all responsibilities that have been assigned to you.',
413
- // widgetImage: ASSETS.recentActivitiesWidget,
414
- // value: 0,
415
- // },
416
- // {
417
- // title: 'Exception Summary',
418
- // id: 'exception_summary_flag',
419
- // description:
420
- // 'Displays all responsibilities that have been assigned to you.',
421
- // widgetImage: ASSETS.exceptionSummaryWidget,
422
- // value: 0,
423
- // },
424
- // ];
350
+ complianceWidgetsData = [
351
+ {
352
+ title: 'Overview',
353
+ id: 'overview_flag',
354
+ description: 'Displays all responsibilities that have been assigned to you.',
355
+ widgetImage: ASSETS.overviewWidget,
356
+ value: 0,
357
+ },
358
+ {
359
+ title: 'Responsibility Calendar',
360
+ id: 'compliance_calendar_flag',
361
+ description: 'Displays all responsibilities that are due on a particular day.',
362
+ widgetImage: ASSETS.responsibilityCalenderWidget,
363
+ value: 0,
364
+ },
365
+ {
366
+ title: 'Responsibility Center Overview',
367
+ id: 'responsibility_center_overview_flag',
368
+ description: 'Displays all responsibilities that have been assigned to you.',
369
+ widgetImage: ASSETS.overviewWidget,
370
+ value: 0,
371
+ },
372
+ {
373
+ title: 'My Responsibilities',
374
+ id: 'my_responsibilities',
375
+ description: 'Displays all responsibilities that have been assigned to you.',
376
+ widgetImage: ASSETS.myResponsibilitiesWidget,
377
+ tabOption: true,
378
+ value: 0,
379
+ },
380
+ {
381
+ title: 'Key Responsibilities',
382
+ id: 'key_responsibilities',
383
+ description: 'Displays all responsibilities that are due on a particular day.',
384
+ widgetImage: ASSETS.keyResponsibilitiesWidget,
385
+ tabOption: true,
386
+ value: 0,
387
+ },
388
+ {
389
+ title: 'Trend Analysis',
390
+ id: 'trend_analysis_flag',
391
+ description: 'Displays all responsibilities that have been assigned to you.',
392
+ widgetImage: ASSETS.trendAnalysisWidget,
393
+ value: 0,
394
+ },
395
+ {
396
+ title: 'Workroom Updates',
397
+ id: 'workroom_alert_flag',
398
+ description: 'Displays all responsibilities that have been assigned to you.',
399
+ widgetImage: ASSETS.workroomUpdatesWidget,
400
+ value: 0,
401
+ },
402
+ {
403
+ title: 'Recent Activities',
404
+ id: 'recent_activity_flag',
405
+ description: 'Displays all responsibilities that have been assigned to you.',
406
+ widgetImage: ASSETS.recentActivitiesWidget,
407
+ value: 0,
408
+ },
409
+ {
410
+ title: 'Exception Summary',
411
+ id: 'exception_summary_flag',
412
+ description: 'Displays all responsibilities that have been assigned to you.',
413
+ widgetImage: ASSETS.exceptionSummaryWidget,
414
+ value: 0,
415
+ },
416
+ ];
425
417
  riskWidgetsData = [
426
418
  {
427
419
  title: 'Risk Overview',
@@ -547,10 +539,11 @@ class ConfigureWidgetsService {
547
539
  .pipe(retry(2));
548
540
  }
549
541
  moduleType(identifier) {
550
- if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
542
+ if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
543
+ return 'COMPLIANCE';
544
+ }
545
+ else if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
551
546
  return 'RISK';
552
- // } else if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
553
- // return 'COMPLIANCE';
554
547
  }
555
548
  }
556
549
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1167,25 +1160,26 @@ class ConfigureWidgetsComponent {
1167
1160
  this.complianceWidgetsDisplayCount = 0;
1168
1161
  const finalData = [...new Set(this.displayedWidgets)];
1169
1162
  finalData.forEach((element, index) => {
1170
- // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1171
- // if (ele.id == element.widget_code) {
1172
- // ele.visibility = true;
1173
- // if (ele.subWidgets.length > 0) {
1174
- // const filterData: any = [];
1175
- // element.sub_widgets.filter((subwidget: any) => {
1176
- // filterData.push(subwidget.widget_code);
1177
- // });
1178
- // ele.subWidgets.forEach((subElement: any, subIndex: number) => {
1179
- // if (filterData.includes(subElement.id)) {
1180
- // ele.subWidgets[subIndex].visibility = true;
1181
- // } else {
1182
- // ele.subWidgets[subIndex].visibility = false;
1183
- // }
1184
- // });
1185
- // }
1186
- // this.complianceWidgetsDisplayCount++;
1187
- // }
1188
- // });
1163
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
1164
+ if (ele.id == element.widget_code) {
1165
+ ele.visibility = true;
1166
+ if (ele.subWidgets.length > 0) {
1167
+ const filterData = [];
1168
+ element.sub_widgets.filter((subwidget) => {
1169
+ filterData.push(subwidget.widget_code);
1170
+ });
1171
+ ele.subWidgets.forEach((subElement, subIndex) => {
1172
+ if (filterData.includes(subElement.id)) {
1173
+ ele.subWidgets[subIndex].visibility = true;
1174
+ }
1175
+ else {
1176
+ ele.subWidgets[subIndex].visibility = false;
1177
+ }
1178
+ });
1179
+ }
1180
+ this.complianceWidgetsDisplayCount++;
1181
+ }
1182
+ });
1189
1183
  this.widgetsList.RISK.forEach((ele) => {
1190
1184
  if (ele.id == element.widget_code) {
1191
1185
  ele.visibility = true;
@@ -1210,27 +1204,28 @@ class ConfigureWidgetsComponent {
1210
1204
  }
1211
1205
  const data = [...new Set(this.selectedWidgetsData)];
1212
1206
  data.forEach((element, index) => {
1213
- // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1214
- // if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1215
- // ele.value = true;
1216
- // if (ele.subWidgets.length > 0) {
1217
- // const filterData: any = [];
1218
- // element.sub_widgets.filter((subwidget: any) => {
1219
- // if (subwidget.state == 'ACTIVE') {
1220
- // filterData.push(subwidget.widget_code);
1221
- // }
1222
- // });
1223
- // ele.subWidgets.forEach((subElement: any, subIndex: number) => {
1224
- // if (filterData.includes(subElement.id)) {
1225
- // ele.subWidgets[subIndex].value = true;
1226
- // } else {
1227
- // ele.subWidgets[subIndex].value = false;
1228
- // }
1229
- // });
1230
- // }
1231
- // this.selectedWidgets.push(ele);
1232
- // }
1233
- // });
1207
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
1208
+ if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1209
+ ele.value = true;
1210
+ if (ele.subWidgets.length > 0) {
1211
+ const filterData = [];
1212
+ element.sub_widgets.filter((subwidget) => {
1213
+ if (subwidget.state == 'ACTIVE') {
1214
+ filterData.push(subwidget.widget_code);
1215
+ }
1216
+ });
1217
+ ele.subWidgets.forEach((subElement, subIndex) => {
1218
+ if (filterData.includes(subElement.id)) {
1219
+ ele.subWidgets[subIndex].value = true;
1220
+ }
1221
+ else {
1222
+ ele.subWidgets[subIndex].value = false;
1223
+ }
1224
+ });
1225
+ }
1226
+ this.selectedWidgets.push(ele);
1227
+ }
1228
+ });
1234
1229
  this.widgetsList.RISK.forEach((ele) => {
1235
1230
  if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1236
1231
  ele.value = true;
@@ -1259,153 +1254,154 @@ class ConfigureWidgetsComponent {
1259
1254
  }
1260
1255
  ngOnInit() { }
1261
1256
  widgetsList = {
1262
- // COMPLIANCE: [
1263
- // {
1264
- // title: 'Overview',
1265
- // id: 'overview',
1266
- // description:
1267
- // 'Overview shows the performance of responsibilities and Programs.',
1268
- // widgetImage: ASSETS.overviewWidget,
1269
- // value: false,
1270
- // visibility: true,
1271
- // module: 'COMPLIANCE',
1272
- // subWidgets: [],
1273
- // },
1274
- // {
1275
- // title: 'Responsibility Calendar',
1276
- // id: 'compliance_calendar_flag',
1277
- // description:
1278
- // '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.',
1279
- // widgetImage: ASSETS.responsibilityCalenderWidget,
1280
- // value: false,
1281
- // visibility: true,
1282
- // module: 'COMPLIANCE',
1283
- // subWidgets: [],
1284
- // },
1285
- // {
1286
- // title: 'Responsibility Center Overview',
1287
- // id: 'responsibility_center_overview_flag',
1288
- // description:
1289
- // 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
1290
- // widgetImage: ASSETS.responsibilityCenterOverviewWidget,
1291
- // value: false,
1292
- // visibility: true,
1293
- // module: 'COMPLIANCE',
1294
- // subWidgets: [],
1295
- // },
1296
- // {
1297
- // title: 'Responsibilities',
1298
- // id: 'my_responsibilities',
1299
- // description:
1300
- // 'This widget shows the performance of the responsibilities that you are required to complete, the responsibilities that you are reviewing and the responsibilities that you are overseeing.',
1301
- // widgetImage: ASSETS.myResponsibilitiesWidget,
1302
- // tabOption: true,
1303
- // value: false,
1304
- // visibility: true,
1305
- // module: 'COMPLIANCE',
1306
- // subWidgets: [
1307
- // {
1308
- // title: 'My Responsibilities',
1309
- // id: 'my_responsibility_flag',
1310
- // value: false,
1311
- // visibility: true,
1312
- // },
1313
- // {
1314
- // title: 'I’m Reviewing',
1315
- // id: 'reviewer_responsibility_flag',
1316
- // value: false,
1317
- // visibility: true,
1318
- // },
1319
- // {
1320
- // title: 'I’m Overseeing',
1321
- // id: 'cc_responsibility_flag',
1322
- // value: false,
1323
- // visibility: true,
1324
- // },
1325
- // ],
1326
- // },
1327
- // {
1328
- // title: 'Key Responsibilities',
1329
- // id: 'key_responsibilities',
1330
- // description:
1331
- // 'This widget shows the performance of key responsibilities that you are required to complete, that you are reviewing, that you are overseeing and that you have assigned to another person.',
1332
- // widgetImage: ASSETS.keyResponsibilitiesWidget,
1333
- // tabOption: true,
1334
- // value: false,
1335
- // visibility: true,
1336
- // module: 'COMPLIANCE',
1337
- // subWidgets: [
1338
- // {
1339
- // title: 'Overview',
1340
- // id: 'key_responsibilities_overview_flag',
1341
- // value: false,
1342
- // visibility: true,
1343
- // },
1344
- // {
1345
- // title: 'My Responsibilities',
1346
- // id: 'key_my_responsibilities_flag',
1347
- // value: false,
1348
- // visibility: true,
1349
- // },
1350
- // {
1351
- // title: 'I’m Reviewing',
1352
- // id: 'key_i_am_reviewing_flag',
1353
- // value: false,
1354
- // visibility: true,
1355
- // },
1356
- // {
1357
- // title: 'I’m Overseeing',
1358
- // id: 'key_i_am_overseeing_flag',
1359
- // value: false,
1360
- // visibility: true,
1361
- // },
1362
- // ],
1363
- // },
1364
- // {
1365
- // title: 'Trend Analysis',
1366
- // id: 'trend_analysis_flag',
1367
- // description:
1368
- // 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
1369
- // widgetImage: ASSETS.trendAnalysisWidget,
1370
- // value: false,
1371
- // visibility: true,
1372
- // module: 'COMPLIANCE',
1373
- // subWidgets: [],
1374
- // },
1375
- // {
1376
- // title: 'Workroom Updates',
1377
- // id: 'workroom_alert_flag',
1378
- // description:
1379
- // 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
1380
- // widgetImage: ASSETS.workroomUpdatesWidget,
1381
- // value: false,
1382
- // visibility: true,
1383
- // module: 'COMPLIANCE',
1384
- // subWidgets: [],
1385
- // },
1386
- // {
1387
- // title: 'Recent Activities',
1388
- // id: 'recent_activity_flag',
1389
- // description:
1390
- // 'This is a chronological view of the recent updates of responsibilities.',
1391
- // widgetImage: ASSETS.recentActivitiesWidget,
1392
- // value: false,
1393
- // visibility: true,
1394
- // module: 'COMPLIANCE',
1395
- // subWidgets: [],
1396
- // },
1397
- // {
1398
- // title: 'Exception Summary',
1399
- // id: 'exception_summary_flag',
1400
- // description:
1401
- // 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
1402
- // widgetImage: ASSETS.exceptionSummaryWidget,
1403
- // value: false,
1404
- // visibility: true,
1405
- // module: 'COMPLIANCE',
1406
- // subWidgets: [],
1407
- // },
1408
- // ],
1257
+ COMPLIANCE: [
1258
+ {
1259
+ title: 'Overview',
1260
+ id: 'overview',
1261
+ description: 'Overview shows the performance of responsibilities and Programs.',
1262
+ widgetImage: ASSETS.overviewWidget,
1263
+ value: false,
1264
+ visibility: true,
1265
+ module: 'COMPLIANCE',
1266
+ subWidgets: [],
1267
+ },
1268
+ {
1269
+ title: 'Responsibility Calendar',
1270
+ id: 'compliance_calendar_flag',
1271
+ 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.',
1272
+ widgetImage: ASSETS.responsibilityCalenderWidget,
1273
+ value: false,
1274
+ visibility: true,
1275
+ module: 'COMPLIANCE',
1276
+ subWidgets: [],
1277
+ },
1278
+ {
1279
+ title: 'Responsibilities by Assignee',
1280
+ id: 'responsibilities_by_assignee',
1281
+ description: 'The Responsibilities by Assignee widget shows the performance of responsibilities by users.',
1282
+ widgetImage: ASSETS.responsibilitiesByAssignee,
1283
+ value: false,
1284
+ visibility: true,
1285
+ module: 'COMPLIANCE',
1286
+ subWidgets: [],
1287
+ },
1288
+ {
1289
+ title: 'Responsibility Center Overview',
1290
+ id: 'responsibility_center_overview_flag',
1291
+ description: 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
1292
+ widgetImage: ASSETS.responsibilityCenterOverviewWidget,
1293
+ value: false,
1294
+ visibility: true,
1295
+ module: 'COMPLIANCE',
1296
+ subWidgets: [],
1297
+ },
1298
+ {
1299
+ title: 'Responsibilities',
1300
+ id: 'my_responsibilities',
1301
+ description: 'This widget shows the performance of the responsibilities that you are required to complete, the responsibilities that you are reviewing and the responsibilities that you are overseeing.',
1302
+ widgetImage: ASSETS.myResponsibilitiesWidget,
1303
+ tabOption: true,
1304
+ value: false,
1305
+ visibility: true,
1306
+ module: 'COMPLIANCE',
1307
+ subWidgets: [
1308
+ {
1309
+ title: 'My Responsibilities',
1310
+ id: 'my_responsibility_flag',
1311
+ value: false,
1312
+ visibility: true,
1313
+ },
1314
+ {
1315
+ title: 'I’m Reviewing',
1316
+ id: 'reviewer_responsibility_flag',
1317
+ value: false,
1318
+ visibility: true,
1319
+ },
1320
+ {
1321
+ title: 'I’m Overseeing',
1322
+ id: 'cc_responsibility_flag',
1323
+ value: false,
1324
+ visibility: true,
1325
+ },
1326
+ ],
1327
+ },
1328
+ {
1329
+ title: 'Key Responsibilities',
1330
+ id: 'key_responsibilities',
1331
+ description: 'This widget shows the performance of key responsibilities that you are required to complete, that you are reviewing, that you are overseeing and that you have assigned to another person.',
1332
+ widgetImage: ASSETS.keyResponsibilitiesWidget,
1333
+ tabOption: true,
1334
+ value: false,
1335
+ visibility: true,
1336
+ module: 'COMPLIANCE',
1337
+ subWidgets: [
1338
+ {
1339
+ title: 'Overview',
1340
+ id: 'key_responsibilities_overview_flag',
1341
+ value: false,
1342
+ visibility: true,
1343
+ },
1344
+ {
1345
+ title: 'My Responsibilities',
1346
+ id: 'key_my_responsibilities_flag',
1347
+ value: false,
1348
+ visibility: true,
1349
+ },
1350
+ {
1351
+ title: 'I’m Reviewing',
1352
+ id: 'key_i_am_reviewing_flag',
1353
+ value: false,
1354
+ visibility: true,
1355
+ },
1356
+ {
1357
+ title: 'I’m Overseeing',
1358
+ id: 'key_i_am_overseeing_flag',
1359
+ value: false,
1360
+ visibility: true,
1361
+ },
1362
+ ],
1363
+ },
1364
+ {
1365
+ title: 'Trend Analysis',
1366
+ id: 'trend_analysis_flag',
1367
+ description: 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
1368
+ widgetImage: ASSETS.trendAnalysisWidget,
1369
+ value: false,
1370
+ visibility: true,
1371
+ module: 'COMPLIANCE',
1372
+ subWidgets: [],
1373
+ },
1374
+ {
1375
+ title: 'Workroom Updates',
1376
+ id: 'workroom_alert_flag',
1377
+ description: 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
1378
+ widgetImage: ASSETS.workroomUpdatesWidget,
1379
+ value: false,
1380
+ visibility: true,
1381
+ module: 'COMPLIANCE',
1382
+ subWidgets: [],
1383
+ },
1384
+ {
1385
+ title: 'Recent Activities',
1386
+ id: 'recent_activity_flag',
1387
+ description: 'This is a chronological view of the recent updates of responsibilities.',
1388
+ widgetImage: ASSETS.recentActivitiesWidget,
1389
+ value: false,
1390
+ visibility: true,
1391
+ module: 'COMPLIANCE',
1392
+ subWidgets: [],
1393
+ },
1394
+ {
1395
+ title: 'Exception Summary',
1396
+ id: 'exception_summary_flag',
1397
+ description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
1398
+ widgetImage: ASSETS.exceptionSummaryWidget,
1399
+ value: false,
1400
+ visibility: true,
1401
+ module: 'COMPLIANCE',
1402
+ subWidgets: [],
1403
+ },
1404
+ ],
1409
1405
  RISK: [
1410
1406
  {
1411
1407
  title: 'Risk Overview',
@@ -1562,9 +1558,7 @@ class ConfigureWidgetsComponent {
1562
1558
  },
1563
1559
  ],
1564
1560
  };
1565
- selectWidget(event,
1566
- //module: 'COMPLIANCE' | 'RISK',
1567
- module, widgetId, subWidgetId) {
1561
+ selectWidget(event, module, widgetId, subWidgetId) {
1568
1562
  const widgetIndex = this.widgetsList[module].findIndex((ele) => ele.id == widgetId);
1569
1563
  const isSubWidgetAddable = this.selectedWidgets.findIndex((widget) => widget.id === widgetId);
1570
1564
  if (event) {
@@ -1612,11 +1606,11 @@ class ConfigureWidgetsComponent {
1612
1606
  }
1613
1607
  setSelectedWidgets() {
1614
1608
  this.selectedWidgets = [];
1615
- // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1616
- // if (ele.value) {
1617
- // this.selectedWidgets.push(ele);
1618
- // }
1619
- // });
1609
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
1610
+ if (ele.value) {
1611
+ this.selectedWidgets.push(ele);
1612
+ }
1613
+ });
1620
1614
  this.widgetsList.RISK.forEach((ele) => {
1621
1615
  if (ele.value) {
1622
1616
  this.selectedWidgets.push(ele);
@@ -1640,14 +1634,14 @@ class ConfigureWidgetsComponent {
1640
1634
  this.closeConfigureWidgets.emit(false);
1641
1635
  }
1642
1636
  setWidgetsVisibilityToFalse() {
1643
- // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1644
- // ele.visibility = false;
1645
- // if (ele.subWidgets.length > 0) {
1646
- // ele.subWidgets.forEach((subElement: any) => {
1647
- // subElement.visibility = false;
1648
- // });
1649
- // }
1650
- // });
1637
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
1638
+ ele.visibility = false;
1639
+ if (ele.subWidgets.length > 0) {
1640
+ ele.subWidgets.forEach((subElement) => {
1641
+ subElement.visibility = false;
1642
+ });
1643
+ }
1644
+ });
1651
1645
  this.widgetsList.RISK.forEach((ele) => {
1652
1646
  ele.visibility = false;
1653
1647
  if (ele.subWidgets.length > 0) {
@@ -1658,11 +1652,11 @@ class ConfigureWidgetsComponent {
1658
1652
  });
1659
1653
  }
1660
1654
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
1661
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n <div\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n Configure Widgets\n </div>\n <button\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n (click)=\"closeConfigureDashboard()\"\n >\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n </button>\n </div>\n <div class=\"configure-widgets-body\">\n <div class=\"configure-widgets-tab\">\n <ul>\n <li\n [class.active]=\"module === 'COMPLIANCE'\"\n *ngIf=\"showCompliance\"\n (click)=\"module = 'COMPLIANCE'\"\n >\n <!-- <button>\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n </button> -->\n </li>\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n <button (click)=\"module = 'RISK'\">\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"configure-widgets-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n </div>\n <div\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n >\n <ng-container\n *ngFor=\"let widget of widgetsList[module] | search : search\"\n >\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n <label class=\"block\">\n <input\n type=\"checkbox\"\n [checked]=\"widget.value\"\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n />\n <div class=\"check-icon\">\n <svg\n class=\"check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"check-circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"check-circle\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"configure-widgets-item-head\">\n <h4\n class=\"configure-widgets-item-title\"\n [innerHTML]=\"widget?.title\"\n ></h4>\n <p\n class=\"configure-widgets-item-description\"\n [innerHTML]=\"widget?.description\"\n ></p>\n <button\n *ngIf=\"!widget.value\"\n class=\"configure-widgets-item-button add\"\n (click)=\"selectWidget(true, module, widget.id)\"\n >\n + ADD\n </button>\n <button\n *ngIf=\"widget.value\"\n class=\"configure-widgets-item-button remove\"\n (click)=\"selectWidget(false, module, widget.id)\"\n >\n - Remove\n </button>\n </div>\n <div class=\"configure-widgets-item-body\">\n <div class=\"image-wrapper\">\n <img\n [ngSrc]=\"widget?.widgetImage\"\n alt=\"\"\n width=\"790\"\n height=\"613\"\n />\n </div>\n <div\n class=\"floating-option vx-d-flex\"\n *ngIf=\"widget?.subWidgets?.length > 0\"\n >\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n <app-cs-checkbox\n *ngIf=\"subWidget.visibility\"\n (ngValueChange)=\"\n selectWidget($event, module, widget.id, subWidget.id)\n \"\n [ngValue]=\"subWidget.value\"\n >{{ subWidget.title }}\n </app-cs-checkbox>\n </ng-container>\n </div>\n </div>\n </label>\n </div>\n </ng-container>\n\n <!-- No Data Image -->\n </div>\n <app-no-data\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n [noDataImage]=\"ASSETS.configure_widget\"\n [noDataText]=\"'No data to display'\"\n >\n </app-no-data>\n\n <floating-bar\n (submitEvent)=\"onNextClick()\"\n (cancelEvent)=\"closeConfigureDashboard()\"\n [selectedData]=\"selectedWidgets\"\n (deleteEvent)=\"removeWidget($event)\"\n ></floating-bar>\n </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
1655
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n <div\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n Configure Widgets\n </div>\n <button\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n (click)=\"closeConfigureDashboard()\"\n >\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n </button>\n </div>\n <div class=\"configure-widgets-body\">\n <div class=\"configure-widgets-tab\">\n <ul>\n <li\n [class.active]=\"module === 'COMPLIANCE'\"\n *ngIf=\"showCompliance\"\n (click)=\"module = 'COMPLIANCE'\"\n >\n <button>\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n </button>\n </li>\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n <button (click)=\"module = 'RISK'\">\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"configure-widgets-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n </div>\n <div\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n >\n <ng-container\n *ngFor=\"let widget of widgetsList[module] | search : search\"\n >\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n <label class=\"block\">\n <input\n type=\"checkbox\"\n [checked]=\"widget.value\"\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n />\n <div class=\"check-icon\">\n <svg\n class=\"check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"check-circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"check-circle\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"configure-widgets-item-head\">\n <h4\n class=\"configure-widgets-item-title\"\n [innerHTML]=\"widget?.title\"\n ></h4>\n <p\n class=\"configure-widgets-item-description\"\n [innerHTML]=\"widget?.description\"\n ></p>\n <button\n *ngIf=\"!widget.value\"\n class=\"configure-widgets-item-button add\"\n (click)=\"selectWidget(true, module, widget.id)\"\n >\n + ADD\n </button>\n <button\n *ngIf=\"widget.value\"\n class=\"configure-widgets-item-button remove\"\n (click)=\"selectWidget(false, module, widget.id)\"\n >\n - Remove\n </button>\n </div>\n <div class=\"configure-widgets-item-body\">\n <div class=\"image-wrapper\">\n <img\n [ngSrc]=\"widget?.widgetImage\"\n alt=\"\"\n width=\"790\"\n height=\"613\"\n />\n </div>\n <div\n class=\"floating-option vx-d-flex\"\n *ngIf=\"widget?.subWidgets?.length > 0\"\n >\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n <app-cs-checkbox\n *ngIf=\"subWidget.visibility\"\n (ngValueChange)=\"\n selectWidget($event, module, widget.id, subWidget.id)\n \"\n [ngValue]=\"subWidget.value\"\n >{{ subWidget.title }}\n </app-cs-checkbox>\n </ng-container>\n </div>\n </div>\n </label>\n </div>\n </ng-container>\n\n <!-- No Data Image -->\n </div>\n <app-no-data\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n [noDataImage]=\"ASSETS.configure_widget\"\n [noDataText]=\"'No data to display'\"\n >\n </app-no-data>\n\n <floating-bar\n (submitEvent)=\"onNextClick()\"\n (cancelEvent)=\"closeConfigureDashboard()\"\n [selectedData]=\"selectedWidgets\"\n (deleteEvent)=\"removeWidget($event)\"\n ></floating-bar>\n </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
1662
1656
  }
1663
1657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
1664
1658
  type: Component,
1665
- args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n <div\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n Configure Widgets\n </div>\n <button\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n (click)=\"closeConfigureDashboard()\"\n >\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n </button>\n </div>\n <div class=\"configure-widgets-body\">\n <div class=\"configure-widgets-tab\">\n <ul>\n <li\n [class.active]=\"module === 'COMPLIANCE'\"\n *ngIf=\"showCompliance\"\n (click)=\"module = 'COMPLIANCE'\"\n >\n <!-- <button>\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n </button> -->\n </li>\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n <button (click)=\"module = 'RISK'\">\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"configure-widgets-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n </div>\n <div\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n >\n <ng-container\n *ngFor=\"let widget of widgetsList[module] | search : search\"\n >\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n <label class=\"block\">\n <input\n type=\"checkbox\"\n [checked]=\"widget.value\"\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n />\n <div class=\"check-icon\">\n <svg\n class=\"check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"check-circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"check-circle\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"configure-widgets-item-head\">\n <h4\n class=\"configure-widgets-item-title\"\n [innerHTML]=\"widget?.title\"\n ></h4>\n <p\n class=\"configure-widgets-item-description\"\n [innerHTML]=\"widget?.description\"\n ></p>\n <button\n *ngIf=\"!widget.value\"\n class=\"configure-widgets-item-button add\"\n (click)=\"selectWidget(true, module, widget.id)\"\n >\n + ADD\n </button>\n <button\n *ngIf=\"widget.value\"\n class=\"configure-widgets-item-button remove\"\n (click)=\"selectWidget(false, module, widget.id)\"\n >\n - Remove\n </button>\n </div>\n <div class=\"configure-widgets-item-body\">\n <div class=\"image-wrapper\">\n <img\n [ngSrc]=\"widget?.widgetImage\"\n alt=\"\"\n width=\"790\"\n height=\"613\"\n />\n </div>\n <div\n class=\"floating-option vx-d-flex\"\n *ngIf=\"widget?.subWidgets?.length > 0\"\n >\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n <app-cs-checkbox\n *ngIf=\"subWidget.visibility\"\n (ngValueChange)=\"\n selectWidget($event, module, widget.id, subWidget.id)\n \"\n [ngValue]=\"subWidget.value\"\n >{{ subWidget.title }}\n </app-cs-checkbox>\n </ng-container>\n </div>\n </div>\n </label>\n </div>\n </ng-container>\n\n <!-- No Data Image -->\n </div>\n <app-no-data\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n [noDataImage]=\"ASSETS.configure_widget\"\n [noDataText]=\"'No data to display'\"\n >\n </app-no-data>\n\n <floating-bar\n (submitEvent)=\"onNextClick()\"\n (cancelEvent)=\"closeConfigureDashboard()\"\n [selectedData]=\"selectedWidgets\"\n (deleteEvent)=\"removeWidget($event)\"\n ></floating-bar>\n </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
1659
+ args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\n <div\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\n Configure Widgets\n </div>\n <button\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\n (click)=\"closeConfigureDashboard()\"\n >\n <i class=\"icons vx-fs-16\">&#xe91d;</i> Back\n </button>\n </div>\n <div class=\"configure-widgets-body\">\n <div class=\"configure-widgets-tab\">\n <ul>\n <li\n [class.active]=\"module === 'COMPLIANCE'\"\n *ngIf=\"showCompliance\"\n (click)=\"module = 'COMPLIANCE'\"\n >\n <button>\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\n </button>\n </li>\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\n <button (click)=\"module = 'RISK'\">\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"configure-widgets-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\n </div>\n <div\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\n >\n <ng-container\n *ngFor=\"let widget of widgetsList[module] | search : search\"\n >\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\n <label class=\"block\">\n <input\n type=\"checkbox\"\n [checked]=\"widget.value\"\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\n />\n <div class=\"check-icon\">\n <svg\n class=\"check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"check-circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"check-circle\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"configure-widgets-item-head\">\n <h4\n class=\"configure-widgets-item-title\"\n [innerHTML]=\"widget?.title\"\n ></h4>\n <p\n class=\"configure-widgets-item-description\"\n [innerHTML]=\"widget?.description\"\n ></p>\n <button\n *ngIf=\"!widget.value\"\n class=\"configure-widgets-item-button add\"\n (click)=\"selectWidget(true, module, widget.id)\"\n >\n + ADD\n </button>\n <button\n *ngIf=\"widget.value\"\n class=\"configure-widgets-item-button remove\"\n (click)=\"selectWidget(false, module, widget.id)\"\n >\n - Remove\n </button>\n </div>\n <div class=\"configure-widgets-item-body\">\n <div class=\"image-wrapper\">\n <img\n [ngSrc]=\"widget?.widgetImage\"\n alt=\"\"\n width=\"790\"\n height=\"613\"\n />\n </div>\n <div\n class=\"floating-option vx-d-flex\"\n *ngIf=\"widget?.subWidgets?.length > 0\"\n >\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\n <app-cs-checkbox\n *ngIf=\"subWidget.visibility\"\n (ngValueChange)=\"\n selectWidget($event, module, widget.id, subWidget.id)\n \"\n [ngValue]=\"subWidget.value\"\n >{{ subWidget.title }}\n </app-cs-checkbox>\n </ng-container>\n </div>\n </div>\n </label>\n </div>\n </ng-container>\n\n <!-- No Data Image -->\n </div>\n <app-no-data\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\n [noDataImage]=\"ASSETS.configure_widget\"\n [noDataText]=\"'No data to display'\"\n >\n </app-no-data>\n\n <floating-bar\n (submitEvent)=\"onNextClick()\"\n (cancelEvent)=\"closeConfigureDashboard()\"\n [selectedData]=\"selectedWidgets\"\n (deleteEvent)=\"removeWidget($event)\"\n ></floating-bar>\n </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
1666
1660
  }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
1667
1661
  type: Output
1668
1662
  }], closeConfigureWidgets: [{
@@ -4359,11 +4353,11 @@ class CreateDashboardComponent {
4359
4353
  }
4360
4354
  }
4361
4355
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
4362
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n <div\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n [class.animate-slideInRight]=\"animation\"\n >\n <div\n class=\"more-option\"\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-user-list\n *ngIf=\"activeSelector === 'whoCanView'\"\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n (closeUserList)=\"activateSelector('', false)\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n [listDetails]=\"listDetails\"\n [totalgroupscount]=\"totalgroups\"\n [feature]=\"feature\"\n ></app-user-list>\n <app-responsibility-center\n *ngIf=\"activeSelector === 'rcList'\"\n [responsibilityCentersList]=\"responsibilityCentersList\"\n [radioSelection]=\"false\"\n [selectedResponsibilityCenters]=\"\n dashboardForm.selectedResponsibilityCenters\n \"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"activateSelector('', false)\"\n >\n </app-responsibility-center>\n <app-categories\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\n [categoryList]=\"responsibilityCategoriesTree\"\n [allCategories]=\"allComplianceCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n (saveSelectedCategory)=\"\n saveSelectedList('responsibilityCategories', $event)\n \"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-categories>\n <app-risk-categories\n *ngIf=\"activeSelector === 'riskCategories'\"\n [categoryList]=\"riskCategoryList\"\n [allCategories]=\"allRiskCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-risk-categories>\n\n <app-frequency\n *ngIf=\"activeSelector === 'frequency'\"\n (closeFrequencyPopup)=\"activateSelector('', false)\"\n (saveFrequency)=\"saveFrequency($event)\"\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n [selectedDate]=\"dashboardForm.frequencyDate\"\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n >\n </app-frequency>\n </div>\n <div\n class=\"vx-dialog-container side-dialog\"\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n <div class=\"form-group\" [class.disabled]=\"disabled\">\n <div\n class=\"vx-dialog-body-container\"\n (scroll)=\"animateImage()\"\n [class.hidden-scroll]=\"popoverService.stopScroll\"\n >\n <!-- Dashboard Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardIcon\"\n *ngIf=\"\n !dashboardForm.dashboardName || activeSelector === 'name'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Dashboard Name\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div class=\"vx-input-group\">\n <input\n class=\"textField\"\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n [(ngModel)]=\"dashboardForm.dashboardName\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n (focusout)=\"activateSelector('name', false)\"\n />\n\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n >{{ 30 - dashboardForm.dashboardName.length }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardName?.length > 30 ||\n !dashboardForm?.dashboardName)\n \"\n >\n {{\n dashboardForm.dashboardName.length > 30\n ? \"You have exceeded the maximum character limit of 30 characters.\"\n : \"Please enter a name for this Dashboard.\"\n }}\n </p>\n\n <div class=\"vx-input-group vx-mt-2\">\n <vcomply-editor\n [editorConfig]=\"dashboardDescription\"\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n ></vcomply-editor>\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n >{{\n 250 -\n (dashboardForm?.dashboardDescriptionText | textCount)\n }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\n \"\n >\n You have exceeded the maximum character limit of 250\n characters.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Who -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'whoCanView'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'whoCanView' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length == 0 ||\n activeSelector === 'whoCanView'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 0 &&\n activeSelector !== 'whoCanView'\n \"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Who can view this dashboard?<span\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Who can view this dashboard?\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n )\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"user.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ user.member_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 1 &&\n !groupsEnabled\n \"\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userList.popover()\"\n placement=\"left\"\n >\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n </button>\n </div>\n <app-popover #userList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of dashboardForm?.selectedViewers\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"user?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n ) && !groupsEnabled\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe90d;</i\n >\n {{ user?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </ng-container>\n\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER(S)</span\n >\n <button\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ dashboardForm?.selectedViewers?.length }}\n </button>\n </div>\n <span\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n dashboardForm?.selectedGroup?.length &&\n dashboardForm?.selectedViewers?.length\n \"\n >&</span\n >\n <div\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\n id=\"usersandgroups\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER GROUP(S)</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"right\"\n >\n {{ dashboardForm?.selectedGroup?.length }}\n </button>\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n data.member_id\n )\n \"\n (click)=\"remove('whoCanView', data)\"\n >&#xe90d;</i\n >\n {{ data.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <app-popover #groupCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('whoCanViewGroup', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'whoCanView'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'rcList'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rcList' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n activeSelector === 'rcList'\n \"\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n activeSelector !== 'rcList'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RESPONSIBILITY CENTER(S)</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Responsibility Center(s) that you would like<br />displayed\n in the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\n .length\n }}\n </button>\n\n <app-popover #rcList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rc?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('rc', rc)\"\n >&#xe90d;</i\n >\n {{ rc?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'rcList'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Program -->\n <!-- <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'responsibilityCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 || activeSelector === 'responsibilityCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n activeSelector !== 'responsibilityCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >PROGRAM</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Program(s) that you would like displayed in\n the<br />Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('responsibilityCategories', rCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rCategory.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rCategory.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories\n ?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rCategoryList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCategories?.slice(\n 1\n ).length\n }}\n </button>\n\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rCategory?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"\n remove(\n 'responsibilityCategories',\n rCategory\n )\n \"\n >&#xe90d;</i\n >\n {{ rCategory?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div> -->\n\n <!-- Risk Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'riskCategories'\"\n *ngIf=\"showRiskCategory && isManageRisk\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'riskCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length == 0 ||\n activeSelector === 'riskCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length > 0 &&\n activeSelector !== 'riskCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\" *ngIf=\"isManageRisk\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RISK CATEGORIES</label\n >\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Risk Categories that you would like displayed<br />in\n the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"riskCategory.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ riskCategory.category_name }}</span\n >\n <button\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"riskList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedRiskCategories?.slice(1).length\n }}\n </button>\n\n <app-popover #riskList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"riskCategory?.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe90d;</i\n >\n {{ riskCategory?.category_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'riskCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Display Criteria -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >DISPLAY CRITERIA</label\n >\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n >\n Those Items that have been assigned to either the selected\n Responsibility Center(s) or the selected\n Categories.</app-cs-radio\n >\n\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n >\n Those Items that have been assigned to both the selected\n Responsibility Center(s) and the selected\n Categories.</app-cs-radio\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timeframe -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n !dashboardForm?.selectedFromDate ||\n !dashboardForm?.selectedToDate\n \"\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedFromDate &&\n dashboardForm?.selectedToDate\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >TIMEFRAME</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >Select how long you would like the information selected to be\n displayed for. If no timeframe is selected, the information\n will be displayed permanently.</label\n >\n <div class=\"input-group vx-d-flex vx-justify-between\">\n <div class=\"date-select\">\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"from_date\"\n [value]=\"\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'From'\"\n (click)=\"openFromDatePicker()\"\n readonly\n />\n <dp-date-picker\n #fromDatePicker\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeFromDatePicker(); datePickerOverlay = false\n \"\n [config]=\"fromDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeFromDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n <div\n class=\"date-select\"\n *ngIf=\"!hideToDate\"\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n >\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"to_date\"\n [value]=\"\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'To'\"\n (click)=\"openToDatePicker()\"\n readonly\n />\n <dp-date-picker\n #toDatePicker\n [(ngModel)]=\"dashboardForm.selectedToDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeToDatePicker(); datePickerOverlay = false\n \"\n [config]=\"toDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeToDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n dashboardForm.selectedFromDate &&\n !dashboardForm.selectedToDate\n \"\n >\n Select a time-frame.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Email Summary -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"!dashboardForm.frequencyMessage\"\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Email Summaries</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >If you would like to send a summary of this Dashboard, please\n select a frequency(By default VComply sends a weekly\n Summary).</label\n >\n <div\n *ngIf=\"!dashboardForm.frequencyMessage\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Email Summaries\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [arTooltip]=\"dashboardForm.frequencyMessage\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n [innerHTML]=\"dashboardForm.frequencyMessage\"\n ></div>\n\n <button\n *ngIf=\"\n dashboardForm.frequencyMessage &&\n activeSelector !== 'frequency'\n \"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"button-block\">\n <button\n class=\"vx-btn block primary\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"configureDashboard()\"\n >\n Next: Configure Widgets\n </button>\n </div>\n </div>\n\n <button\n class=\"close-dialog\"\n type=\"button\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"close.emit({ mode: 'discard' })\"\n [arTooltip]=\"'[Esc] to close'\"\n placement=\"left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n >\n <i class=\"icons\">&#xe93f;</i>\n </button>\n <div\n class=\"global-confirmation-alert\"\n *ngIf=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div class=\"global-confirmation-alert-top\">\n <span class=\"icon-block\">\n <i class=\"icons\">&#xe930;</i>\n </span>\n <p class=\"text\" *ngIf=\"showRiskCategory\">\n Select a Responsibility Center or Risk Category.\n </p>\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\n Select a Responsibility Center.\n </p>\n </div>\n <div class=\"global-confirmation-alert-bottom\">\n <p class=\"message\"></p>\n <div class=\"button-group\">\n <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n OKAY\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<app-smiley-dialog\n *ngIf=\"isSmiley\"\n [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n *ngIf=\"openConfigureWidgets\"\n [mode]=\"mode\"\n [displayedWidgets]=\"displayedWidgets\"\n [showRisk]=\"showRiskWidgets\"\n [showCompliance]=\"!showComplianceWidgets\"\n [selectedWidgetsData]=\"selectedWidgets\"\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
4356
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n <div\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n [class.animate-slideInRight]=\"animation\"\n >\n <div\n class=\"more-option\"\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-user-list\n *ngIf=\"activeSelector === 'whoCanView'\"\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n (closeUserList)=\"activateSelector('', false)\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n [listDetails]=\"listDetails\"\n [totalgroupscount]=\"totalgroups\"\n [feature]=\"feature\"\n ></app-user-list>\n <app-responsibility-center\n *ngIf=\"activeSelector === 'rcList'\"\n [responsibilityCentersList]=\"responsibilityCentersList\"\n [radioSelection]=\"false\"\n [selectedResponsibilityCenters]=\"\n dashboardForm.selectedResponsibilityCenters\n \"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"activateSelector('', false)\"\n >\n </app-responsibility-center>\n <app-categories\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\n [categoryList]=\"responsibilityCategoriesTree\"\n [allCategories]=\"allComplianceCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n (saveSelectedCategory)=\"\n saveSelectedList('responsibilityCategories', $event)\n \"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-categories>\n <app-risk-categories\n *ngIf=\"activeSelector === 'riskCategories'\"\n [categoryList]=\"riskCategoryList\"\n [allCategories]=\"allRiskCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-risk-categories>\n\n <app-frequency\n *ngIf=\"activeSelector === 'frequency'\"\n (closeFrequencyPopup)=\"activateSelector('', false)\"\n (saveFrequency)=\"saveFrequency($event)\"\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n [selectedDate]=\"dashboardForm.frequencyDate\"\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n >\n </app-frequency>\n </div>\n <div\n class=\"vx-dialog-container side-dialog\"\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n <div class=\"form-group\" [class.disabled]=\"disabled\">\n <div\n class=\"vx-dialog-body-container\"\n (scroll)=\"animateImage()\"\n [class.hidden-scroll]=\"popoverService.stopScroll\"\n >\n <!-- Dashboard Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardIcon\"\n *ngIf=\"\n !dashboardForm.dashboardName || activeSelector === 'name'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Dashboard Name\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div class=\"vx-input-group\">\n <input\n class=\"textField\"\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n [(ngModel)]=\"dashboardForm.dashboardName\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n (focusout)=\"activateSelector('name', false)\"\n />\n\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n >{{ 30 - dashboardForm.dashboardName.length }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardName?.length > 30 ||\n !dashboardForm?.dashboardName)\n \"\n >\n {{\n dashboardForm.dashboardName.length > 30\n ? \"You have exceeded the maximum character limit of 30 characters.\"\n : \"Please enter a name for this Dashboard.\"\n }}\n </p>\n\n <div class=\"vx-input-group vx-mt-2\">\n <vcomply-editor\n [editorConfig]=\"dashboardDescription\"\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n ></vcomply-editor>\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n >{{\n 250 -\n (dashboardForm?.dashboardDescriptionText | textCount)\n }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\n \"\n >\n You have exceeded the maximum character limit of 250\n characters.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Who -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'whoCanView'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'whoCanView' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length == 0 ||\n activeSelector === 'whoCanView'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 0 &&\n activeSelector !== 'whoCanView'\n \"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Who can view this dashboard?<span\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Who can view this dashboard?\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n )\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"user.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ user.member_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 1 &&\n !groupsEnabled\n \"\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userList.popover()\"\n placement=\"left\"\n >\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n </button>\n </div>\n <app-popover #userList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of dashboardForm?.selectedViewers\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"user?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n ) && !groupsEnabled\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe90d;</i\n >\n {{ user?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </ng-container>\n\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER(S)</span\n >\n <button\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ dashboardForm?.selectedViewers?.length }}\n </button>\n </div>\n <span\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n dashboardForm?.selectedGroup?.length &&\n dashboardForm?.selectedViewers?.length\n \"\n >&</span\n >\n <div\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\n id=\"usersandgroups\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER GROUP(S)</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"right\"\n >\n {{ dashboardForm?.selectedGroup?.length }}\n </button>\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n data.member_id\n )\n \"\n (click)=\"remove('whoCanView', data)\"\n >&#xe90d;</i\n >\n {{ data.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <app-popover #groupCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('whoCanViewGroup', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'whoCanView'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'rcList'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rcList' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n activeSelector === 'rcList'\n \"\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n activeSelector !== 'rcList'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RESPONSIBILITY CENTER(S)</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Responsibility Center(s) that you would like<br />displayed\n in the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\n .length\n }}\n </button>\n\n <app-popover #rcList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rc?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('rc', rc)\"\n >&#xe90d;</i\n >\n {{ rc?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'rcList'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Program -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'responsibilityCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 || activeSelector === 'responsibilityCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n activeSelector !== 'responsibilityCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >PROGRAM</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Program(s) that you would like displayed in\n the<br />Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('responsibilityCategories', rCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rCategory.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rCategory.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories\n ?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rCategoryList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCategories?.slice(\n 1\n ).length\n }}\n </button>\n\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rCategory?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"\n remove(\n 'responsibilityCategories',\n rCategory\n )\n \"\n >&#xe90d;</i\n >\n {{ rCategory?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Risk Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'riskCategories'\"\n *ngIf=\"showRiskCategory && isManageRisk\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'riskCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length == 0 ||\n activeSelector === 'riskCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length > 0 &&\n activeSelector !== 'riskCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\" *ngIf=\"isManageRisk\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RISK CATEGORIES</label\n >\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Risk Categories that you would like displayed<br />in\n the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"riskCategory.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ riskCategory.category_name }}</span\n >\n <button\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"riskList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedRiskCategories?.slice(1).length\n }}\n </button>\n\n <app-popover #riskList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"riskCategory?.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe90d;</i\n >\n {{ riskCategory?.category_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'riskCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Display Criteria -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >DISPLAY CRITERIA</label\n >\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n >\n Those Items that have been assigned to either the selected\n Responsibility Center(s) or the selected\n Categories.</app-cs-radio\n >\n\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n >\n Those Items that have been assigned to both the selected\n Responsibility Center(s) and the selected\n Categories.</app-cs-radio\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timeframe -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n !dashboardForm?.selectedFromDate ||\n !dashboardForm?.selectedToDate\n \"\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedFromDate &&\n dashboardForm?.selectedToDate\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >TIMEFRAME</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >Select how long you would like the information selected to be\n displayed for. If no timeframe is selected, the information\n will be displayed permanently.</label\n >\n <div class=\"input-group vx-d-flex vx-justify-between\">\n <div class=\"date-select\">\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"from_date\"\n [value]=\"\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'From'\"\n (click)=\"openFromDatePicker()\"\n readonly\n />\n <dp-date-picker\n #fromDatePicker\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeFromDatePicker(); datePickerOverlay = false\n \"\n [config]=\"fromDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeFromDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n <div\n class=\"date-select\"\n *ngIf=\"!hideToDate\"\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n >\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"to_date\"\n [value]=\"\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'To'\"\n (click)=\"openToDatePicker()\"\n readonly\n />\n <dp-date-picker\n #toDatePicker\n [(ngModel)]=\"dashboardForm.selectedToDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeToDatePicker(); datePickerOverlay = false\n \"\n [config]=\"toDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeToDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n dashboardForm.selectedFromDate &&\n !dashboardForm.selectedToDate\n \"\n >\n Select a time-frame.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Email Summary -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"!dashboardForm.frequencyMessage\"\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Email Summaries</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >If you would like to send a summary of this Dashboard, please\n select a frequency(By default VComply sends a weekly\n Summary).</label\n >\n <div\n *ngIf=\"!dashboardForm.frequencyMessage\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Email Summaries\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [arTooltip]=\"dashboardForm.frequencyMessage\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n [innerHTML]=\"dashboardForm.frequencyMessage\"\n ></div>\n\n <button\n *ngIf=\"\n dashboardForm.frequencyMessage &&\n activeSelector !== 'frequency'\n \"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"button-block\">\n <button\n class=\"vx-btn block primary\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"configureDashboard()\"\n >\n Next: Configure Widgets\n </button>\n </div>\n </div>\n\n <button\n class=\"close-dialog\"\n type=\"button\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"close.emit({ mode: 'discard' })\"\n [arTooltip]=\"'[Esc] to close'\"\n placement=\"left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n >\n <i class=\"icons\">&#xe93f;</i>\n </button>\n <div\n class=\"global-confirmation-alert\"\n *ngIf=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div class=\"global-confirmation-alert-top\">\n <span class=\"icon-block\">\n <i class=\"icons\">&#xe930;</i>\n </span>\n <p class=\"text\" *ngIf=\"showRiskCategory\">\n Select a Responsibility Center, Program or Risk Category.\n </p>\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\n Select a Responsibility Center or Program.\n </p>\n </div>\n <div class=\"global-confirmation-alert-bottom\">\n <p class=\"message\"></p>\n <div class=\"button-group\">\n <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n OKAY\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<app-smiley-dialog\n *ngIf=\"isSmiley\"\n [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n *ngIf=\"openConfigureWidgets\"\n [mode]=\"mode\"\n [displayedWidgets]=\"displayedWidgets\"\n [showRisk]=\"showRiskWidgets\"\n [showCompliance]=\"showComplianceWidgets\"\n [selectedWidgetsData]=\"selectedWidgets\"\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
4363
4357
  }
4364
4358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
4365
4359
  type: Component,
4366
- args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n <div\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n [class.animate-slideInRight]=\"animation\"\n >\n <div\n class=\"more-option\"\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-user-list\n *ngIf=\"activeSelector === 'whoCanView'\"\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n (closeUserList)=\"activateSelector('', false)\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n [listDetails]=\"listDetails\"\n [totalgroupscount]=\"totalgroups\"\n [feature]=\"feature\"\n ></app-user-list>\n <app-responsibility-center\n *ngIf=\"activeSelector === 'rcList'\"\n [responsibilityCentersList]=\"responsibilityCentersList\"\n [radioSelection]=\"false\"\n [selectedResponsibilityCenters]=\"\n dashboardForm.selectedResponsibilityCenters\n \"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"activateSelector('', false)\"\n >\n </app-responsibility-center>\n <app-categories\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\n [categoryList]=\"responsibilityCategoriesTree\"\n [allCategories]=\"allComplianceCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n (saveSelectedCategory)=\"\n saveSelectedList('responsibilityCategories', $event)\n \"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-categories>\n <app-risk-categories\n *ngIf=\"activeSelector === 'riskCategories'\"\n [categoryList]=\"riskCategoryList\"\n [allCategories]=\"allRiskCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-risk-categories>\n\n <app-frequency\n *ngIf=\"activeSelector === 'frequency'\"\n (closeFrequencyPopup)=\"activateSelector('', false)\"\n (saveFrequency)=\"saveFrequency($event)\"\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n [selectedDate]=\"dashboardForm.frequencyDate\"\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n >\n </app-frequency>\n </div>\n <div\n class=\"vx-dialog-container side-dialog\"\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n <div class=\"form-group\" [class.disabled]=\"disabled\">\n <div\n class=\"vx-dialog-body-container\"\n (scroll)=\"animateImage()\"\n [class.hidden-scroll]=\"popoverService.stopScroll\"\n >\n <!-- Dashboard Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardIcon\"\n *ngIf=\"\n !dashboardForm.dashboardName || activeSelector === 'name'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Dashboard Name\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div class=\"vx-input-group\">\n <input\n class=\"textField\"\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n [(ngModel)]=\"dashboardForm.dashboardName\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n (focusout)=\"activateSelector('name', false)\"\n />\n\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n >{{ 30 - dashboardForm.dashboardName.length }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardName?.length > 30 ||\n !dashboardForm?.dashboardName)\n \"\n >\n {{\n dashboardForm.dashboardName.length > 30\n ? \"You have exceeded the maximum character limit of 30 characters.\"\n : \"Please enter a name for this Dashboard.\"\n }}\n </p>\n\n <div class=\"vx-input-group vx-mt-2\">\n <vcomply-editor\n [editorConfig]=\"dashboardDescription\"\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n ></vcomply-editor>\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n >{{\n 250 -\n (dashboardForm?.dashboardDescriptionText | textCount)\n }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\n \"\n >\n You have exceeded the maximum character limit of 250\n characters.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Who -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'whoCanView'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'whoCanView' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length == 0 ||\n activeSelector === 'whoCanView'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 0 &&\n activeSelector !== 'whoCanView'\n \"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Who can view this dashboard?<span\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Who can view this dashboard?\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n )\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"user.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ user.member_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 1 &&\n !groupsEnabled\n \"\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userList.popover()\"\n placement=\"left\"\n >\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n </button>\n </div>\n <app-popover #userList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of dashboardForm?.selectedViewers\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"user?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n ) && !groupsEnabled\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe90d;</i\n >\n {{ user?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </ng-container>\n\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER(S)</span\n >\n <button\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ dashboardForm?.selectedViewers?.length }}\n </button>\n </div>\n <span\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n dashboardForm?.selectedGroup?.length &&\n dashboardForm?.selectedViewers?.length\n \"\n >&</span\n >\n <div\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\n id=\"usersandgroups\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER GROUP(S)</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"right\"\n >\n {{ dashboardForm?.selectedGroup?.length }}\n </button>\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n data.member_id\n )\n \"\n (click)=\"remove('whoCanView', data)\"\n >&#xe90d;</i\n >\n {{ data.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <app-popover #groupCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('whoCanViewGroup', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'whoCanView'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'rcList'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rcList' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n activeSelector === 'rcList'\n \"\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n activeSelector !== 'rcList'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RESPONSIBILITY CENTER(S)</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Responsibility Center(s) that you would like<br />displayed\n in the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\n .length\n }}\n </button>\n\n <app-popover #rcList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rc?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('rc', rc)\"\n >&#xe90d;</i\n >\n {{ rc?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'rcList'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Program -->\n <!-- <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'responsibilityCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 || activeSelector === 'responsibilityCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n activeSelector !== 'responsibilityCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >PROGRAM</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Program(s) that you would like displayed in\n the<br />Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('responsibilityCategories', rCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rCategory.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rCategory.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories\n ?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rCategoryList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCategories?.slice(\n 1\n ).length\n }}\n </button>\n\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rCategory?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"\n remove(\n 'responsibilityCategories',\n rCategory\n )\n \"\n >&#xe90d;</i\n >\n {{ rCategory?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div> -->\n\n <!-- Risk Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'riskCategories'\"\n *ngIf=\"showRiskCategory && isManageRisk\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'riskCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length == 0 ||\n activeSelector === 'riskCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length > 0 &&\n activeSelector !== 'riskCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\" *ngIf=\"isManageRisk\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RISK CATEGORIES</label\n >\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Risk Categories that you would like displayed<br />in\n the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"riskCategory.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ riskCategory.category_name }}</span\n >\n <button\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"riskList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedRiskCategories?.slice(1).length\n }}\n </button>\n\n <app-popover #riskList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"riskCategory?.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe90d;</i\n >\n {{ riskCategory?.category_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'riskCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Display Criteria -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >DISPLAY CRITERIA</label\n >\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n >\n Those Items that have been assigned to either the selected\n Responsibility Center(s) or the selected\n Categories.</app-cs-radio\n >\n\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n >\n Those Items that have been assigned to both the selected\n Responsibility Center(s) and the selected\n Categories.</app-cs-radio\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timeframe -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n !dashboardForm?.selectedFromDate ||\n !dashboardForm?.selectedToDate\n \"\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedFromDate &&\n dashboardForm?.selectedToDate\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >TIMEFRAME</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >Select how long you would like the information selected to be\n displayed for. If no timeframe is selected, the information\n will be displayed permanently.</label\n >\n <div class=\"input-group vx-d-flex vx-justify-between\">\n <div class=\"date-select\">\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"from_date\"\n [value]=\"\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'From'\"\n (click)=\"openFromDatePicker()\"\n readonly\n />\n <dp-date-picker\n #fromDatePicker\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeFromDatePicker(); datePickerOverlay = false\n \"\n [config]=\"fromDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeFromDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n <div\n class=\"date-select\"\n *ngIf=\"!hideToDate\"\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n >\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"to_date\"\n [value]=\"\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'To'\"\n (click)=\"openToDatePicker()\"\n readonly\n />\n <dp-date-picker\n #toDatePicker\n [(ngModel)]=\"dashboardForm.selectedToDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeToDatePicker(); datePickerOverlay = false\n \"\n [config]=\"toDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeToDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n dashboardForm.selectedFromDate &&\n !dashboardForm.selectedToDate\n \"\n >\n Select a time-frame.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Email Summary -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"!dashboardForm.frequencyMessage\"\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Email Summaries</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >If you would like to send a summary of this Dashboard, please\n select a frequency(By default VComply sends a weekly\n Summary).</label\n >\n <div\n *ngIf=\"!dashboardForm.frequencyMessage\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Email Summaries\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [arTooltip]=\"dashboardForm.frequencyMessage\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n [innerHTML]=\"dashboardForm.frequencyMessage\"\n ></div>\n\n <button\n *ngIf=\"\n dashboardForm.frequencyMessage &&\n activeSelector !== 'frequency'\n \"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"button-block\">\n <button\n class=\"vx-btn block primary\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"configureDashboard()\"\n >\n Next: Configure Widgets\n </button>\n </div>\n </div>\n\n <button\n class=\"close-dialog\"\n type=\"button\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"close.emit({ mode: 'discard' })\"\n [arTooltip]=\"'[Esc] to close'\"\n placement=\"left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n >\n <i class=\"icons\">&#xe93f;</i>\n </button>\n <div\n class=\"global-confirmation-alert\"\n *ngIf=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div class=\"global-confirmation-alert-top\">\n <span class=\"icon-block\">\n <i class=\"icons\">&#xe930;</i>\n </span>\n <p class=\"text\" *ngIf=\"showRiskCategory\">\n Select a Responsibility Center or Risk Category.\n </p>\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\n Select a Responsibility Center.\n </p>\n </div>\n <div class=\"global-confirmation-alert-bottom\">\n <p class=\"message\"></p>\n <div class=\"button-group\">\n <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n OKAY\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<app-smiley-dialog\n *ngIf=\"isSmiley\"\n [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n *ngIf=\"openConfigureWidgets\"\n [mode]=\"mode\"\n [displayedWidgets]=\"displayedWidgets\"\n [showRisk]=\"showRiskWidgets\"\n [showCompliance]=\"!showComplianceWidgets\"\n [selectedWidgetsData]=\"selectedWidgets\"\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
4360
+ args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n <div\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\n [class.animate-slideInRight]=\"animation\"\n >\n <div\n class=\"more-option\"\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-user-list\n *ngIf=\"activeSelector === 'whoCanView'\"\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\n (closeUserList)=\"activateSelector('', false)\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n [listDetails]=\"listDetails\"\n [totalgroupscount]=\"totalgroups\"\n [feature]=\"feature\"\n ></app-user-list>\n <app-responsibility-center\n *ngIf=\"activeSelector === 'rcList'\"\n [responsibilityCentersList]=\"responsibilityCentersList\"\n [radioSelection]=\"false\"\n [selectedResponsibilityCenters]=\"\n dashboardForm.selectedResponsibilityCenters\n \"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"activateSelector('', false)\"\n >\n </app-responsibility-center>\n <app-categories\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\n [categoryList]=\"responsibilityCategoriesTree\"\n [allCategories]=\"allComplianceCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n (saveSelectedCategory)=\"\n saveSelectedList('responsibilityCategories', $event)\n \"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-categories>\n <app-risk-categories\n *ngIf=\"activeSelector === 'riskCategories'\"\n [categoryList]=\"riskCategoryList\"\n [allCategories]=\"allRiskCategories\"\n [categoryIdKey]=\"'category_id'\"\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\n (closeCategoriesList)=\"activateSelector('', false)\"\n ></app-risk-categories>\n\n <app-frequency\n *ngIf=\"activeSelector === 'frequency'\"\n (closeFrequencyPopup)=\"activateSelector('', false)\"\n (saveFrequency)=\"saveFrequency($event)\"\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\n [selectedDate]=\"dashboardForm.frequencyDate\"\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\n >\n </app-frequency>\n </div>\n <div\n class=\"vx-dialog-container side-dialog\"\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\n >\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n <div class=\"form-group\" [class.disabled]=\"disabled\">\n <div\n class=\"vx-dialog-body-container\"\n (scroll)=\"animateImage()\"\n [class.hidden-scroll]=\"popoverService.stopScroll\"\n >\n <!-- Dashboard Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardIcon\"\n *ngIf=\"\n !dashboardForm.dashboardName || activeSelector === 'name'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Dashboard Name\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div class=\"vx-input-group\">\n <input\n class=\"textField\"\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n [(ngModel)]=\"dashboardForm.dashboardName\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n (focusout)=\"activateSelector('name', false)\"\n />\n\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\n >{{ 30 - dashboardForm.dashboardName.length }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardName?.length > 30 ||\n !dashboardForm?.dashboardName)\n \"\n >\n {{\n dashboardForm.dashboardName.length > 30\n ? \"You have exceeded the maximum character limit of 30 characters.\"\n : \"Please enter a name for this Dashboard.\"\n }}\n </p>\n\n <div class=\"vx-input-group vx-mt-2\">\n <vcomply-editor\n [editorConfig]=\"dashboardDescription\"\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\n ></vcomply-editor>\n <span\n class=\"counter\"\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\n >{{\n 250 -\n (dashboardForm?.dashboardDescriptionText | textCount)\n }}</span\n >\n </div>\n\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\n \"\n >\n You have exceeded the maximum character limit of 250\n characters.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Who -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'whoCanView'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'whoCanView' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length == 0 ||\n activeSelector === 'whoCanView'\n \"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n class=\"checkIcon\"\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 0 &&\n activeSelector !== 'whoCanView'\n \"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Who can view this dashboard?<span\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\n >*</span\n ></label\n >\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Who can view this dashboard?\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n )\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"user.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ user.member_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedViewers?.length > 1 &&\n !groupsEnabled\n \"\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userList.popover()\"\n placement=\"left\"\n >\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n </button>\n </div>\n <app-popover #userList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of dashboardForm?.selectedViewers\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"user?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n user.member_id\n ) && !groupsEnabled\n \"\n (click)=\"remove('whoCanView', user)\"\n >&#xe90d;</i\n >\n {{ user?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </ng-container>\n\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER(S)</span\n >\n <button\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ dashboardForm?.selectedViewers?.length }}\n </button>\n </div>\n <span\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n dashboardForm?.selectedGroup?.length &&\n dashboardForm?.selectedViewers?.length\n \"\n >&</span\n >\n <div\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\n id=\"usersandgroups\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\"\n >USER GROUP(S)</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"right\"\n >\n {{ dashboardForm?.selectedGroup?.length }}\n </button>\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n data.member_id\n )\n \"\n (click)=\"remove('whoCanView', data)\"\n >&#xe90d;</i\n >\n {{ data.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <app-popover #groupCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"data.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('whoCanViewGroup', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'whoCanView'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('whoCanView', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'rcList'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rcList' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n activeSelector === 'rcList'\n \"\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n activeSelector !== 'rcList'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RESPONSIBILITY CENTER(S)</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Responsibility Center(s) that you would like<br />displayed\n in the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCenters?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\n .length\n }}\n </button>\n\n <app-popover #rcList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of dashboardForm?.selectedResponsibilityCenters\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rc?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('rc', rc)\"\n >&#xe90d;</i\n >\n {{ rc?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'rcList'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('rcList', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Program -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'responsibilityCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 || activeSelector === 'responsibilityCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\n activeSelector !== 'responsibilityCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >PROGRAM</label\n >\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length == 0\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Program(s) that you would like displayed in\n the<br />Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories?.length > 0\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('responsibilityCategories', rCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"rCategory.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rCategory.item_name }}</span\n >\n <button\n *ngIf=\"\n dashboardForm?.selectedResponsibilityCategories\n ?.length > 1\n \"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rCategoryList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedResponsibilityCategories?.slice(\n 1\n ).length\n }}\n </button>\n\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rCategory of dashboardForm?.selectedResponsibilityCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"rCategory?.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"\n remove(\n 'responsibilityCategories',\n rCategory\n )\n \"\n >&#xe90d;</i\n >\n {{ rCategory?.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('responsibilityCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Risk Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'riskCategories'\"\n *ngIf=\"showRiskCategory && isManageRisk\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'riskCategories' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length == 0 ||\n activeSelector === 'riskCategories'\n \"\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedRiskCategories?.length > 0 &&\n activeSelector !== 'riskCategories'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\" *ngIf=\"isManageRisk\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >RISK CATEGORIES</label\n >\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n [class.error]=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length ==\n 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the Risk Categories that you would like displayed<br />in\n the Dashboard, if any.\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n 0,\n 1\n )\n \"\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [arTooltip]=\"riskCategory.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ riskCategory.category_name }}</span\n >\n <button\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"riskList.popover()\"\n placement=\"left\"\n >\n +{{\n dashboardForm?.selectedRiskCategories?.slice(1).length\n }}\n </button>\n\n <app-popover #riskList [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let riskCategory of dashboardForm?.selectedRiskCategories\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"riskCategory?.category_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"remove('riskCategory', riskCategory)\"\n >&#xe90d;</i\n >\n {{ riskCategory?.category_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n *ngIf=\"activeSelector !== 'riskCategories'\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('riskCategories', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Display Criteria -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >DISPLAY CRITERIA</label\n >\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\n >\n Those Items that have been assigned to either the selected\n Responsibility Center(s) or the selected\n Categories.</app-cs-radio\n >\n\n <app-cs-radio\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\n >\n Those Items that have been assigned to both the selected\n Responsibility Center(s) and the selected\n Categories.</app-cs-radio\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timeframe -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"image\">\n <img\n *ngIf=\"\n !dashboardForm?.selectedFromDate ||\n !dashboardForm?.selectedToDate\n \"\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"\n dashboardForm?.selectedFromDate &&\n dashboardForm?.selectedToDate\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >TIMEFRAME</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >Select how long you would like the information selected to be\n displayed for. If no timeframe is selected, the information\n will be displayed permanently.</label\n >\n <div class=\"input-group vx-d-flex vx-justify-between\">\n <div class=\"date-select\">\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"from_date\"\n [value]=\"\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'From'\"\n (click)=\"openFromDatePicker()\"\n readonly\n />\n <dp-date-picker\n #fromDatePicker\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeFromDatePicker(); datePickerOverlay = false\n \"\n [config]=\"fromDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeFromDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n <div\n class=\"date-select\"\n *ngIf=\"!hideToDate\"\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\n >\n <i class=\"icons\">&#xe92d;</i>\n <input\n type=\"text\"\n id=\"to_date\"\n [value]=\"\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n \"\n [placeholder]=\"'To'\"\n (click)=\"openToDatePicker()\"\n readonly\n />\n <dp-date-picker\n #toDatePicker\n [(ngModel)]=\"dashboardForm.selectedToDate\"\n placeholder=\"Select Date\"\n (onSelect)=\"\n closeToDatePicker(); datePickerOverlay = false\n \"\n [config]=\"toDatePickerConfig\"\n ></dp-date-picker>\n <div\n class=\"overlay\"\n (click)=\"closeToDatePicker()\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n <p\n class=\"vx-txt-error\"\n [appScrollInView]=\"true\"\n *ngIf=\"\n submitted &&\n dashboardForm.selectedFromDate &&\n !dashboardForm.selectedToDate\n \"\n >\n Select a time-frame.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Email Summary -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n activeSelector !== 'name'\n \"\n >\n <div class=\"image\">\n <img\n *ngIf=\"!dashboardForm.frequencyMessage\"\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n alt=\"\"\n width=\"36\"\n height=\"36\"\n />\n <svg\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"form\">\n <div class=\"vx-form-group vx-d-block\">\n <label\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\n >Email Summaries</label\n >\n <label class=\"vx-control-panel-sub-label\"\n >If you would like to send a summary of this Dashboard, please\n select a frequency(By default VComply sends a weekly\n Summary).</label\n >\n <div\n *ngIf=\"!dashboardForm.frequencyMessage\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Email Summaries\n </div>\n </div>\n\n <div\n *ngIf=\"dashboardForm.frequencyMessage\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [arTooltip]=\"dashboardForm.frequencyMessage\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n [innerHTML]=\"dashboardForm.frequencyMessage\"\n ></div>\n\n <button\n *ngIf=\"\n dashboardForm.frequencyMessage &&\n activeSelector !== 'frequency'\n \"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"button-block\">\n <button\n class=\"vx-btn block primary\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"configureDashboard()\"\n >\n Next: Configure Widgets\n </button>\n </div>\n </div>\n\n <button\n class=\"close-dialog\"\n type=\"button\"\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\n (click)=\"close.emit({ mode: 'discard' })\"\n [arTooltip]=\"'[Esc] to close'\"\n placement=\"left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\n >\n <i class=\"icons\">&#xe93f;</i>\n </button>\n <div\n class=\"global-confirmation-alert\"\n *ngIf=\"\n submitted &&\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\n dashboardForm?.selectedRiskCategories?.length == 0\n \"\n >\n <div class=\"global-confirmation-alert-top\">\n <span class=\"icon-block\">\n <i class=\"icons\">&#xe930;</i>\n </span>\n <p class=\"text\" *ngIf=\"showRiskCategory\">\n Select a Responsibility Center, Program or Risk Category.\n </p>\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\n Select a Responsibility Center or Program.\n </p>\n </div>\n <div class=\"global-confirmation-alert-bottom\">\n <p class=\"message\"></p>\n <div class=\"button-group\">\n <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n OKAY\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<app-smiley-dialog\n *ngIf=\"isSmiley\"\n [message]=\"smileyMessage\"\n></app-smiley-dialog>\n\n<app-configure-widgets\n *ngIf=\"openConfigureWidgets\"\n [mode]=\"mode\"\n [displayedWidgets]=\"displayedWidgets\"\n [showRisk]=\"showRiskWidgets\"\n [showCompliance]=\"showComplianceWidgets\"\n [selectedWidgetsData]=\"selectedWidgets\"\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\n></app-configure-widgets>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
4367
4361
  }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
4368
4362
  type: Input
4369
4363
  }], mode: [{