vc-create-dashboard 3.0.69 → 3.0.71

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 (15) hide show
  1. package/esm2022/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +206 -197
  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 +33 -34
  4. package/esm2022/lib/create-dashboard-container/create-dashboard.component.mjs +6 -13
  5. package/esm2022/lib/create-dashboard-container/create-dashboard.module.mjs +12 -3
  6. package/esm2022/lib/create-dashboard-container/services/configure-widgets.service.mjs +80 -72
  7. package/esm2022/lib/create-dashboard-container/user-list/user-list.component.mjs +3 -3
  8. package/fesm2022/vc-create-dashboard.mjs +358 -316
  9. package/fesm2022/vc-create-dashboard.mjs.map +1 -1
  10. package/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.d.ts +1 -27
  11. package/lib/create-dashboard-container/configure-widgets/configure-widgets/widget.interface.d.ts +1 -1
  12. package/lib/create-dashboard-container/create-dashboard.component.d.ts +0 -1
  13. package/lib/create-dashboard-container/create-dashboard.module.d.ts +4 -0
  14. package/lib/create-dashboard-container/services/configure-widgets.service.d.ts +1 -16
  15. package/package.json +1 -1
package/fesm2022/vc-create-dashboard.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
3
3
  import dayjs from 'dayjs';
4
+ import * as LocalizedFormat from 'dayjs/plugin/localizedFormat';
4
5
  import * as i1 from '@angular/common/http';
5
6
  import { HttpHeaders, HttpParams } from '@angular/common/http';
6
7
  import { JwtHelperService } from '@auth0/angular-jwt';
@@ -48,40 +49,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
48
49
  }]
49
50
  }] });
50
51
 
51
- const BASE_URL = 'https://cdn.v-comply.com';
52
52
  const ASSETS = {
53
- dashBoardIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/what.svg`,
54
- dashBoardUsersIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/who.svg`,
55
- dashBoardRcIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
56
- dashBoardProgramIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
57
- dashBoardRiskIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
58
- dashBoardTimeFrameIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/when.svg`,
59
- dashBoardEmailSummariesIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
60
- configure_widget: `${BASE_URL}/libraries/configure-widget/assets/images/configure-widget.svg`,
61
- overviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/overview.png`,
62
- responsibilityCalenderWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-calender.png`,
63
- responsibilityCenterOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-center-overview.png`,
64
- myResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/my-responsibilities.png`,
65
- keyResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/key-responsibilities.png`,
66
- trendAnalysisWidget: `${BASE_URL}/libraries/configure-widget/assets/images/trend-analysis.png`,
67
- workroomUpdatesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/workroom-updates.png`,
68
- recentActivitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/recent-activities.png`,
69
- exceptionSummaryWidget: `${BASE_URL}/libraries/configure-widget/assets/images/exception-summary.png`,
70
- riskOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-overview.png`,
71
- appetiteToleranceWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png`,
72
- inherentRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-RC.png`,
73
- residualRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-RC.png`,
74
- riskCategoryOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png`,
75
- riskHeatmapWidget: `${BASE_URL}/libraries/configure-widget/assets/images/risk-heatmap.png`,
76
- inherentCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-categories.png`,
77
- residualCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-categories.png`,
78
- tenRiskRatingsWidget: `${BASE_URL}/libraries/configure-widget/assets/images/10-risk-ratings.png`,
79
- search_data: `${BASE_URL}/libraries/workflow-engine/assets/workflow/search-data.svg`,
80
- appetite_tolerance: `${BASE_URL}/libraries/configure-widget/assets/images/appetite-tolerance.png`,
81
- inherent_trend: `${BASE_URL}/libraries/configure-widget/assets/images/inherent-trend.png`,
82
- residual_trend: `${BASE_URL}/libraries/configure-widget/assets/images/residual-trend.png`,
83
- risk_trend: `${BASE_URL}/libraries/configure-widget/assets/images/risk-trend.png`,
84
- policyApproverView: `${BASE_URL}/policy/images/policy-approver-view.svg`,
53
+ dashBoardIcon: `/libraries/workflow-engine/assets/workflow/what.svg`,
54
+ dashBoardUsersIcon: `/libraries/workflow-engine/assets/workflow/who.svg`,
55
+ dashBoardRcIcon: `/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
56
+ dashBoardProgramIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
57
+ dashBoardRiskIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
58
+ dashBoardTimeFrameIcon: `/libraries/workflow-engine/assets/workflow/when.svg`,
59
+ dashBoardEmailSummariesIcon: `/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
60
+ configure_widget: `/libraries/configure-widget/assets/images/configure-widget.svg`,
61
+ overviewWidget: `/libraries/configure-widget/assets/images/overview.png`,
62
+ responsibilityCalenderWidget: `/libraries/configure-widget/assets/images/responsibility-calender.png`,
63
+ responsibilityCenterOverviewWidget: `/libraries/configure-widget/assets/images/responsibility-center-overview.png`,
64
+ myResponsibilitiesWidget: `/libraries/configure-widget/assets/images/my-responsibilities.png`,
65
+ keyResponsibilitiesWidget: `/libraries/configure-widget/assets/images/key-responsibilities.png`,
66
+ trendAnalysisWidget: `/libraries/configure-widget/assets/images/trend-analysis.png`,
67
+ workroomUpdatesWidget: `/libraries/configure-widget/assets/images/workroom-updates.png`,
68
+ recentActivitiesWidget: `/libraries/configure-widget/assets/images/recent-activities.png`,
69
+ exceptionSummaryWidget: `/libraries/configure-widget/assets/images/exception-summary.png`,
70
+ riskOverviewWidget: `/libraries/configure-widget/assets/images/riskV2/risk-overview.png`,
71
+ appetiteToleranceWidget: `/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png`,
72
+ inherentRCWidget: `/libraries/configure-widget/assets/images/riskV2/inherent-RC.png`,
73
+ residualRCWidget: `/libraries/configure-widget/assets/images/riskV2/residual-RC.png`,
74
+ riskCategoryOverviewWidget: `/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png`,
75
+ riskHeatmapWidget: `/libraries/configure-widget/assets/images/risk-heatmap.png`,
76
+ inherentCategoriesWidget: `/libraries/configure-widget/assets/images/riskV2/inherent-categories.png`,
77
+ residualCategoriesWidget: `/libraries/configure-widget/assets/images/riskV2/residual-categories.png`,
78
+ tenRiskRatingsWidget: `/libraries/configure-widget/assets/images/10-risk-ratings.png`,
79
+ search_data: `/libraries/workflow-engine/assets/workflow/search-data.svg`,
80
+ appetite_tolerance: `/libraries/configure-widget/assets/images/appetite-tolerance.png`,
81
+ inherent_trend: `/libraries/configure-widget/assets/images/inherent-trend.png`,
82
+ residual_trend: `/libraries/configure-widget/assets/images/residual-trend.png`,
83
+ risk_trend: `/libraries/configure-widget/assets/images/risk-trend.png`,
84
+ policyApproverView: `/policy/images/policy-approver-view.svg`,
85
85
  };
86
86
 
87
87
  class Configurations {
@@ -346,73 +346,82 @@ class ConfigureWidgetsService {
346
346
  this.env = config.envConfig;
347
347
  }
348
348
  }
349
- complianceWidgetsData = [
350
- {
351
- title: 'Overview',
352
- id: 'overview_flag',
353
- description: 'Displays all responsibilities that have been assigned to you.',
354
- widgetImage: ASSETS.overviewWidget,
355
- value: 0,
356
- },
357
- {
358
- title: 'Responsibility Calendar',
359
- id: 'compliance_calendar_flag',
360
- description: 'Displays all responsibilities that are due on a particular day.',
361
- widgetImage: ASSETS.responsibilityCalenderWidget,
362
- value: 0,
363
- },
364
- {
365
- title: 'Responsibility Center Overview',
366
- id: 'responsibility_center_overview_flag',
367
- description: 'Displays all responsibilities that have been assigned to you.',
368
- widgetImage: ASSETS.overviewWidget,
369
- value: 0,
370
- },
371
- {
372
- title: 'My Responsibilities',
373
- id: 'my_responsibilities',
374
- description: 'Displays all responsibilities that have been assigned to you.',
375
- widgetImage: ASSETS.myResponsibilitiesWidget,
376
- tabOption: true,
377
- value: 0,
378
- },
379
- {
380
- title: 'Key Responsibilities',
381
- id: 'key_responsibilities',
382
- description: 'Displays all responsibilities that are due on a particular day.',
383
- widgetImage: ASSETS.keyResponsibilitiesWidget,
384
- tabOption: true,
385
- value: 0,
386
- },
387
- {
388
- title: 'Trend Analysis',
389
- id: 'trend_analysis_flag',
390
- description: 'Displays all responsibilities that have been assigned to you.',
391
- widgetImage: ASSETS.trendAnalysisWidget,
392
- value: 0,
393
- },
394
- {
395
- title: 'Workroom Updates',
396
- id: 'workroom_alert_flag',
397
- description: 'Displays all responsibilities that have been assigned to you.',
398
- widgetImage: ASSETS.workroomUpdatesWidget,
399
- value: 0,
400
- },
401
- {
402
- title: 'Recent Activities',
403
- id: 'recent_activity_flag',
404
- description: 'Displays all responsibilities that have been assigned to you.',
405
- widgetImage: ASSETS.recentActivitiesWidget,
406
- value: 0,
407
- },
408
- {
409
- title: 'Exception Summary',
410
- id: 'exception_summary_flag',
411
- description: 'Displays all responsibilities that have been assigned to you.',
412
- widgetImage: ASSETS.exceptionSummaryWidget,
413
- value: 0,
414
- },
415
- ];
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
+ // ];
416
425
  riskWidgetsData = [
417
426
  {
418
427
  title: 'Risk Overview',
@@ -538,11 +547,10 @@ class ConfigureWidgetsService {
538
547
  .pipe(retry(2));
539
548
  }
540
549
  moduleType(identifier) {
541
- if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
542
- return 'COMPLIANCE';
543
- }
544
- else if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
550
+ if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
545
551
  return 'RISK';
552
+ // } else if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
553
+ // return 'COMPLIANCE';
546
554
  }
547
555
  }
548
556
  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 });
@@ -1172,26 +1180,25 @@ class ConfigureWidgetsComponent {
1172
1180
  this.complianceWidgetsDisplayCount = 0;
1173
1181
  const finalData = [...new Set(this.displayedWidgets)];
1174
1182
  finalData.forEach((element, index) => {
1175
- this.widgetsList.COMPLIANCE.forEach((ele) => {
1176
- if (ele.id == element.widget_code) {
1177
- ele.visibility = true;
1178
- if (ele.subWidgets.length > 0) {
1179
- const filterData = [];
1180
- element.sub_widgets.filter((subwidget) => {
1181
- filterData.push(subwidget.widget_code);
1182
- });
1183
- ele.subWidgets.forEach((subElement, subIndex) => {
1184
- if (filterData.includes(subElement.id)) {
1185
- ele.subWidgets[subIndex].visibility = true;
1186
- }
1187
- else {
1188
- ele.subWidgets[subIndex].visibility = false;
1189
- }
1190
- });
1191
- }
1192
- this.complianceWidgetsDisplayCount++;
1193
- }
1194
- });
1183
+ // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1184
+ // if (ele.id == element.widget_code) {
1185
+ // ele.visibility = true;
1186
+ // if (ele.subWidgets.length > 0) {
1187
+ // const filterData: any = [];
1188
+ // element.sub_widgets.filter((subwidget: any) => {
1189
+ // filterData.push(subwidget.widget_code);
1190
+ // });
1191
+ // ele.subWidgets.forEach((subElement: any, subIndex: number) => {
1192
+ // if (filterData.includes(subElement.id)) {
1193
+ // ele.subWidgets[subIndex].visibility = true;
1194
+ // } else {
1195
+ // ele.subWidgets[subIndex].visibility = false;
1196
+ // }
1197
+ // });
1198
+ // }
1199
+ // this.complianceWidgetsDisplayCount++;
1200
+ // }
1201
+ // });
1195
1202
  this.widgetsList.RISK.forEach((ele) => {
1196
1203
  if (ele.id == element.widget_code) {
1197
1204
  ele.visibility = true;
@@ -1216,28 +1223,27 @@ class ConfigureWidgetsComponent {
1216
1223
  }
1217
1224
  const data = [...new Set(this.selectedWidgetsData)];
1218
1225
  data.forEach((element, index) => {
1219
- this.widgetsList.COMPLIANCE.forEach((ele) => {
1220
- if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1221
- ele.value = true;
1222
- if (ele.subWidgets.length > 0) {
1223
- const filterData = [];
1224
- element.sub_widgets.filter((subwidget) => {
1225
- if (subwidget.state == 'ACTIVE') {
1226
- filterData.push(subwidget.widget_code);
1227
- }
1228
- });
1229
- ele.subWidgets.forEach((subElement, subIndex) => {
1230
- if (filterData.includes(subElement.id)) {
1231
- ele.subWidgets[subIndex].value = true;
1232
- }
1233
- else {
1234
- ele.subWidgets[subIndex].value = false;
1235
- }
1236
- });
1237
- }
1238
- this.selectedWidgets.push(ele);
1239
- }
1240
- });
1226
+ // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1227
+ // if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1228
+ // ele.value = true;
1229
+ // if (ele.subWidgets.length > 0) {
1230
+ // const filterData: any = [];
1231
+ // element.sub_widgets.filter((subwidget: any) => {
1232
+ // if (subwidget.state == 'ACTIVE') {
1233
+ // filterData.push(subwidget.widget_code);
1234
+ // }
1235
+ // });
1236
+ // ele.subWidgets.forEach((subElement: any, subIndex: number) => {
1237
+ // if (filterData.includes(subElement.id)) {
1238
+ // ele.subWidgets[subIndex].value = true;
1239
+ // } else {
1240
+ // ele.subWidgets[subIndex].value = false;
1241
+ // }
1242
+ // });
1243
+ // }
1244
+ // this.selectedWidgets.push(ele);
1245
+ // }
1246
+ // });
1241
1247
  this.widgetsList.RISK.forEach((ele) => {
1242
1248
  if (ele.id == element.widget_code && element.state == 'ACTIVE') {
1243
1249
  ele.value = true;
@@ -1266,144 +1272,153 @@ class ConfigureWidgetsComponent {
1266
1272
  }
1267
1273
  ngOnInit() { }
1268
1274
  widgetsList = {
1269
- COMPLIANCE: [
1270
- {
1271
- title: 'Overview',
1272
- id: 'overview',
1273
- description: 'Overview shows the performance of responsibilities and Programs.',
1274
- widgetImage: ASSETS.overviewWidget,
1275
- value: false,
1276
- visibility: true,
1277
- module: 'COMPLIANCE',
1278
- subWidgets: [],
1279
- },
1280
- {
1281
- title: 'Responsibility Calendar',
1282
- id: 'compliance_calendar_flag',
1283
- 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.',
1284
- widgetImage: ASSETS.responsibilityCalenderWidget,
1285
- value: false,
1286
- visibility: true,
1287
- module: 'COMPLIANCE',
1288
- subWidgets: [],
1289
- },
1290
- {
1291
- title: 'Responsibility Center Overview',
1292
- id: 'responsibility_center_overview_flag',
1293
- description: 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
1294
- widgetImage: ASSETS.responsibilityCenterOverviewWidget,
1295
- value: false,
1296
- visibility: true,
1297
- module: 'COMPLIANCE',
1298
- subWidgets: [],
1299
- },
1300
- {
1301
- title: 'Responsibilities',
1302
- id: 'my_responsibilities',
1303
- 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.',
1304
- widgetImage: ASSETS.myResponsibilitiesWidget,
1305
- tabOption: true,
1306
- value: false,
1307
- visibility: true,
1308
- module: 'COMPLIANCE',
1309
- subWidgets: [
1310
- {
1311
- title: 'My Responsibilities',
1312
- id: 'my_responsibility_flag',
1313
- value: false,
1314
- visibility: true,
1315
- },
1316
- {
1317
- title: 'I’m Reviewing',
1318
- id: 'reviewer_responsibility_flag',
1319
- value: false,
1320
- visibility: true,
1321
- },
1322
- {
1323
- title: 'I’m Overseeing',
1324
- id: 'cc_responsibility_flag',
1325
- value: false,
1326
- visibility: true,
1327
- },
1328
- ],
1329
- },
1330
- {
1331
- title: 'Key Responsibilities',
1332
- id: 'key_responsibilities',
1333
- 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.',
1334
- widgetImage: ASSETS.keyResponsibilitiesWidget,
1335
- tabOption: true,
1336
- value: false,
1337
- visibility: true,
1338
- module: 'COMPLIANCE',
1339
- subWidgets: [
1340
- {
1341
- title: 'Overview',
1342
- id: 'key_responsibilities_overview_flag',
1343
- value: false,
1344
- visibility: true,
1345
- },
1346
- {
1347
- title: 'My Responsibilities',
1348
- id: 'key_my_responsibilities_flag',
1349
- value: false,
1350
- visibility: true,
1351
- },
1352
- {
1353
- title: 'I’m Reviewing',
1354
- id: 'key_i_am_reviewing_flag',
1355
- value: false,
1356
- visibility: true,
1357
- },
1358
- {
1359
- title: 'I’m Overseeing',
1360
- id: 'key_i_am_overseeing_flag',
1361
- value: false,
1362
- visibility: true,
1363
- },
1364
- ],
1365
- },
1366
- {
1367
- title: 'Trend Analysis',
1368
- id: 'trend_analysis_flag',
1369
- description: 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
1370
- widgetImage: ASSETS.trendAnalysisWidget,
1371
- value: false,
1372
- visibility: true,
1373
- module: 'COMPLIANCE',
1374
- subWidgets: [],
1375
- },
1376
- {
1377
- title: 'Workroom Updates',
1378
- id: 'workroom_alert_flag',
1379
- description: '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: 'This is a chronological view of the recent updates of responsibilities.',
1390
- widgetImage: ASSETS.recentActivitiesWidget,
1391
- value: false,
1392
- visibility: true,
1393
- module: 'COMPLIANCE',
1394
- subWidgets: [],
1395
- },
1396
- {
1397
- title: 'Exception Summary',
1398
- id: 'exception_summary_flag',
1399
- description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
1400
- widgetImage: ASSETS.exceptionSummaryWidget,
1401
- value: false,
1402
- visibility: true,
1403
- module: 'COMPLIANCE',
1404
- subWidgets: [],
1405
- },
1406
- ],
1275
+ // COMPLIANCE: [
1276
+ // {
1277
+ // title: 'Overview',
1278
+ // id: 'overview',
1279
+ // description:
1280
+ // 'Overview shows the performance of responsibilities and Programs.',
1281
+ // widgetImage: ASSETS.overviewWidget,
1282
+ // value: false,
1283
+ // visibility: true,
1284
+ // module: 'COMPLIANCE',
1285
+ // subWidgets: [],
1286
+ // },
1287
+ // {
1288
+ // title: 'Responsibility Calendar',
1289
+ // id: 'compliance_calendar_flag',
1290
+ // description:
1291
+ // '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.',
1292
+ // widgetImage: ASSETS.responsibilityCalenderWidget,
1293
+ // value: false,
1294
+ // visibility: true,
1295
+ // module: 'COMPLIANCE',
1296
+ // subWidgets: [],
1297
+ // },
1298
+ // {
1299
+ // title: 'Responsibility Center Overview',
1300
+ // id: 'responsibility_center_overview_flag',
1301
+ // description:
1302
+ // 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
1303
+ // widgetImage: ASSETS.responsibilityCenterOverviewWidget,
1304
+ // value: false,
1305
+ // visibility: true,
1306
+ // module: 'COMPLIANCE',
1307
+ // subWidgets: [],
1308
+ // },
1309
+ // {
1310
+ // title: 'Responsibilities',
1311
+ // id: 'my_responsibilities',
1312
+ // description:
1313
+ // '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.',
1314
+ // widgetImage: ASSETS.myResponsibilitiesWidget,
1315
+ // tabOption: true,
1316
+ // value: false,
1317
+ // visibility: true,
1318
+ // module: 'COMPLIANCE',
1319
+ // subWidgets: [
1320
+ // {
1321
+ // title: 'My Responsibilities',
1322
+ // id: 'my_responsibility_flag',
1323
+ // value: false,
1324
+ // visibility: true,
1325
+ // },
1326
+ // {
1327
+ // title: 'I’m Reviewing',
1328
+ // id: 'reviewer_responsibility_flag',
1329
+ // value: false,
1330
+ // visibility: true,
1331
+ // },
1332
+ // {
1333
+ // title: 'I’m Overseeing',
1334
+ // id: 'cc_responsibility_flag',
1335
+ // value: false,
1336
+ // visibility: true,
1337
+ // },
1338
+ // ],
1339
+ // },
1340
+ // {
1341
+ // title: 'Key Responsibilities',
1342
+ // id: 'key_responsibilities',
1343
+ // description:
1344
+ // '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.',
1345
+ // widgetImage: ASSETS.keyResponsibilitiesWidget,
1346
+ // tabOption: true,
1347
+ // value: false,
1348
+ // visibility: true,
1349
+ // module: 'COMPLIANCE',
1350
+ // subWidgets: [
1351
+ // {
1352
+ // title: 'Overview',
1353
+ // id: 'key_responsibilities_overview_flag',
1354
+ // value: false,
1355
+ // visibility: true,
1356
+ // },
1357
+ // {
1358
+ // title: 'My Responsibilities',
1359
+ // id: 'key_my_responsibilities_flag',
1360
+ // value: false,
1361
+ // visibility: true,
1362
+ // },
1363
+ // {
1364
+ // title: 'I’m Reviewing',
1365
+ // id: 'key_i_am_reviewing_flag',
1366
+ // value: false,
1367
+ // visibility: true,
1368
+ // },
1369
+ // {
1370
+ // title: 'I’m Overseeing',
1371
+ // id: 'key_i_am_overseeing_flag',
1372
+ // value: false,
1373
+ // visibility: true,
1374
+ // },
1375
+ // ],
1376
+ // },
1377
+ // {
1378
+ // title: 'Trend Analysis',
1379
+ // id: 'trend_analysis_flag',
1380
+ // description:
1381
+ // 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
1382
+ // widgetImage: ASSETS.trendAnalysisWidget,
1383
+ // value: false,
1384
+ // visibility: true,
1385
+ // module: 'COMPLIANCE',
1386
+ // subWidgets: [],
1387
+ // },
1388
+ // {
1389
+ // title: 'Workroom Updates',
1390
+ // id: 'workroom_alert_flag',
1391
+ // description:
1392
+ // 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
1393
+ // widgetImage: ASSETS.workroomUpdatesWidget,
1394
+ // value: false,
1395
+ // visibility: true,
1396
+ // module: 'COMPLIANCE',
1397
+ // subWidgets: [],
1398
+ // },
1399
+ // {
1400
+ // title: 'Recent Activities',
1401
+ // id: 'recent_activity_flag',
1402
+ // description:
1403
+ // 'This is a chronological view of the recent updates of responsibilities.',
1404
+ // widgetImage: ASSETS.recentActivitiesWidget,
1405
+ // value: false,
1406
+ // visibility: true,
1407
+ // module: 'COMPLIANCE',
1408
+ // subWidgets: [],
1409
+ // },
1410
+ // {
1411
+ // title: 'Exception Summary',
1412
+ // id: 'exception_summary_flag',
1413
+ // description:
1414
+ // 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
1415
+ // widgetImage: ASSETS.exceptionSummaryWidget,
1416
+ // value: false,
1417
+ // visibility: true,
1418
+ // module: 'COMPLIANCE',
1419
+ // subWidgets: [],
1420
+ // },
1421
+ // ],
1407
1422
  RISK: [
1408
1423
  {
1409
1424
  title: 'Risk Overview',
@@ -1560,7 +1575,9 @@ class ConfigureWidgetsComponent {
1560
1575
  },
1561
1576
  ],
1562
1577
  };
1563
- selectWidget(event, module, widgetId, subWidgetId) {
1578
+ selectWidget(event,
1579
+ //module: 'COMPLIANCE' | 'RISK',
1580
+ module, widgetId, subWidgetId) {
1564
1581
  const widgetIndex = this.widgetsList[module].findIndex((ele) => ele.id == widgetId);
1565
1582
  const isSubWidgetAddable = this.selectedWidgets.findIndex((widget) => widget.id === widgetId);
1566
1583
  if (event) {
@@ -1608,11 +1625,11 @@ class ConfigureWidgetsComponent {
1608
1625
  }
1609
1626
  setSelectedWidgets() {
1610
1627
  this.selectedWidgets = [];
1611
- this.widgetsList.COMPLIANCE.forEach((ele) => {
1612
- if (ele.value) {
1613
- this.selectedWidgets.push(ele);
1614
- }
1615
- });
1628
+ // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1629
+ // if (ele.value) {
1630
+ // this.selectedWidgets.push(ele);
1631
+ // }
1632
+ // });
1616
1633
  this.widgetsList.RISK.forEach((ele) => {
1617
1634
  if (ele.value) {
1618
1635
  this.selectedWidgets.push(ele);
@@ -1636,14 +1653,14 @@ class ConfigureWidgetsComponent {
1636
1653
  this.closeConfigureWidgets.emit(false);
1637
1654
  }
1638
1655
  setWidgetsVisibilityToFalse() {
1639
- this.widgetsList.COMPLIANCE.forEach((ele) => {
1640
- ele.visibility = false;
1641
- if (ele.subWidgets.length > 0) {
1642
- ele.subWidgets.forEach((subElement) => {
1643
- subElement.visibility = false;
1644
- });
1645
- }
1646
- });
1656
+ // this.widgetsList.COMPLIANCE.forEach((ele: any) => {
1657
+ // ele.visibility = false;
1658
+ // if (ele.subWidgets.length > 0) {
1659
+ // ele.subWidgets.forEach((subElement: any) => {
1660
+ // subElement.visibility = false;
1661
+ // });
1662
+ // }
1663
+ // });
1647
1664
  this.widgetsList.RISK.forEach((ele) => {
1648
1665
  ele.visibility = false;
1649
1666
  if (ele.subWidgets.length > 0) {
@@ -1654,11 +1671,11 @@ class ConfigureWidgetsComponent {
1654
1671
  });
1655
1672
  }
1656
1673
  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 });
1657
- 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" }] });
1674
+ 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" }] });
1658
1675
  }
1659
1676
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
1660
1677
  type: Component,
1661
- 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"] }]
1678
+ 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"] }]
1662
1679
  }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
1663
1680
  type: Output
1664
1681
  }], closeConfigureWidgets: [{
@@ -2391,11 +2408,11 @@ class UserListComponent {
2391
2408
  });
2392
2409
  }
2393
2410
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
2394
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n <div\n class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n Who can view this dashboard?\n </div>\n </div>\n <div class=\"user-list-body\">\n <div\n class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"groupsEnabled\"\n >\n <button\n (click)=\"switchTab('USER')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER'\"\n >\n USERS\n <span\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalList }}</span\n >\n </button>\n <button\n id=\"switchtab\"\n (click)=\"switchTab('GROUP')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'GROUP'\"\n >\n USER GROUPS\n <span\n id=\"groupscount\"\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalgroups }}</span\n >\n </button>\n </div>\n\n <div class=\"user-list-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n [(ngModel)]=\"searchValue\"\n placeholder=\"{{\n currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n }} who can view this dashboard\"\n (keyup.enter)=\"setSearchValue()\"\n (focusout)=\"setSearchValue()\"\n />\n </div>\n\n <ng-container *ngIf=\"currentTab === 'USER'\">\n <div\n class=\"vx-d-flex vx-align-center vx-justify-end\"\n *ngIf=\"totalPages > 1\"\n >\n <div\n class=\"pagination-box\"\n *ngIf=\"totalPages > 1 && searchList.length > 1\"\n >\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n ></app-pagination>\n </div>\n </div>\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n <app-cs-checkbox\n *ngIf=\"!searchValue && searchList.length > 1\"\n [ngValue]=\"selectedList.length == totalList\"\n (ngValueChange)=\"selectAllUsers($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"searchValue && searchList.length > 1\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"list-of-user\">\n <div\n class=\"selection-list vx-mb-4\"\n [class.with-group]=\"groupsEnabled\"\n [class.with-noData]=\"searchList.length == 0\"\n [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n >\n <ul *ngIf=\"searchList.length !== 0\">\n <li *ngFor=\"let data of searchList; let i = index\">\n <app-cs-checkbox\n [disabled]=\"\n listDetails.nonRemovableUsersList.includes(\n data[listDetails.elementIdKey]\n )\n \"\n [ngValue]=\"\n selectedList.length > 0 &&\n selectedIds.includes(data[listDetails.elementIdKey])\n \"\n (ngValueChange)=\"selectElement(data)\"\n [arTooltip]=\"data[listDetails.tooltipKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n >\n </li>\n </ul>\n\n <app-no-data\n *ngIf=\"!vLoader && searchList.length == 0\"\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"'No data to display'\"\n ></app-no-data>\n </div>\n\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n <ng-container *ngIf=\"groupdata as groups\">\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"total_group_pages\"\n [totalList]=\"totalgroups\"\n ></app-pagination>\n </div>\n </div>\n <ng-container *ngIf=\"true\">\n <div\n class=\"user-list-mid vx-mb-4\"\n [class.with-pagination]=\"total_group_pages > 1\"\n >\n <ng-container *ngIf=\"groups?.length > 0\">\n <div class=\"user-list-select vx-mb-4\">\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"!searchValue && groups.length > 1\"\n [ngValue]=\"selectedgroupList.length == totalgroups\"\n (ngValueChange)=\"selectAllGroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"searchValue && groups.length > 1\"\n [ngValue]=\"checkSelectAllGroups()\"\n (ngValueChange)=\"selectAllsearchgroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n </div>\n <div class=\"user-list-item\">\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n <li\n class=\"vx-mb-4\"\n *ngFor=\"let data of groups; let i = index\"\n >\n <app-cs-checkbox\n (ngValueChange)=\"selectGroupElement(data)\"\n [disabled]=\"false\"\n [ngValue]=\"\n selectedgroupList.length > 0 &&\n selectedGroupIds.includes(data[listDetails.groupIdkey])\n \"\n >\n <div class=\"user-name vx-d-flex vx-align-center\">\n <div\n class=\"group-name\"\n [arTooltip]=\"data[listDetails.displayGroupKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ data[listDetails.displayGroupKey] }}\n </div>\n <span\n id=\"usersofgroup\"\n class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n >{{ data[\"associatedUsers\"].length }}\n {{\n data[\"associatedUsers\"].length > 1\n ? \"USERS\"\n : \"USER\"\n }}</span\n >\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n <app-no-data\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"\n (searchValue?.length > 0\n ? 'No match found.'\n : 'No data to display.'\n )\n \"\n ></app-no-data>\n </ng-container>\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n <div\n class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"left vx-d-flex vx-align-center\">\n <button\n class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedList?.length\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ selectedList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedList?.length === 1\"\n >User\n {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n >\n <span *ngIf=\"selectedList?.length > 1\"\n >Users\n {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n >\n </div>\n <button\n class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedgroupList?.length\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"left\"\n >\n {{ selectedgroupList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedgroupList?.length === 1\"\n >User Group selected</span\n >\n <span *ngIf=\"selectedgroupList?.length > 1\"\n >User Groups selected</span\n >\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"selectElement(element)\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n element?.member_id\n )\n \"\n >&#xe90d;</i\n >\n {{ element.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 element of selectedgroupList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element?.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)=\"selectGroupElement(element)\"\n >&#xe90d;</i\n >\n {{ element?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <div class=\"right vx-d-flex vx-align-center\">\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n <button [disabled]=\"false\" (click)=\"onSubmit()\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n <app-dashboard-footer\n [footerDetails]=\"footerDetails\"\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n (deleteEvent)=\"selectElement($event)\"\n (submitEvent)=\"onSubmit()\"\n [userButtonColor]=\"'greenBg'\"\n ></app-dashboard-footer>\n </div>\n </div>\n</div>\n", styles: ["@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\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: 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: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { 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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
2411
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n <div\n class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n Who can view this dashboard?\n </div>\n </div>\n <div class=\"user-list-body\">\n <div\n class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"groupsEnabled\"\n >\n <button\n (click)=\"switchTab('USER')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER'\"\n >\n USERS\n <span\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalList }}</span\n >\n </button>\n <button\n id=\"switchtab\"\n (click)=\"switchTab('GROUP')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'GROUP'\"\n >\n USER GROUPS\n <span\n id=\"groupscount\"\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalgroups }}</span\n >\n </button>\n </div>\n\n <div class=\"user-list-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n [(ngModel)]=\"searchValue\"\n placeholder=\"{{\n currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n }} who can view this dashboard\"\n (keyup.enter)=\"setSearchValue()\"\n (focusout)=\"setSearchValue()\"\n />\n </div>\n\n <ng-container *ngIf=\"currentTab === 'USER'\">\n <div\n class=\"vx-d-flex vx-align-center vx-justify-end\"\n *ngIf=\"totalPages > 1\"\n >\n <div\n class=\"pagination-box\"\n *ngIf=\"totalPages > 1 && searchList.length > 1\"\n >\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n ></app-pagination>\n </div>\n </div>\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n <app-cs-checkbox\n *ngIf=\"!searchValue && searchList.length > 1\"\n [ngValue]=\"selectedList.length == totalList\"\n (ngValueChange)=\"selectAllUsers($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"searchValue && searchList.length > 1\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"list-of-user\">\n <div\n class=\"selection-list vx-mb-4\"\n [class.with-group]=\"groupsEnabled\"\n [class.with-noData]=\"searchList.length == 0\"\n [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n >\n <ul *ngIf=\"searchList.length !== 0\">\n <li *ngFor=\"let data of searchList; let i = index\">\n <app-cs-checkbox\n [disabled]=\"\n listDetails.nonRemovableUsersList.includes(\n data[listDetails.elementIdKey]\n )\n \"\n [ngValue]=\"\n selectedList.length > 0 &&\n selectedIds.includes(data[listDetails.elementIdKey])\n \"\n (ngValueChange)=\"selectElement(data)\"\n [arTooltip]=\"data[listDetails.tooltipKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n >\n </li>\n </ul>\n\n <app-no-data\n *ngIf=\"!vLoader && searchList.length == 0\"\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"'No data to display'\"\n ></app-no-data>\n </div>\n\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n <ng-container *ngIf=\"groupdata as groups\">\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"total_group_pages\"\n [totalList]=\"totalgroups\"\n ></app-pagination>\n </div>\n </div>\n <ng-container *ngIf=\"true\">\n <div\n class=\"user-list-mid vx-mb-4\"\n [class.with-pagination]=\"total_group_pages > 1\"\n >\n <ng-container *ngIf=\"groups?.length > 0\">\n <div class=\"user-list-select vx-mb-4\">\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"!searchValue && groups.length > 1\"\n [ngValue]=\"selectedgroupList.length == totalgroups\"\n (ngValueChange)=\"selectAllGroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"searchValue && groups.length > 1\"\n [ngValue]=\"checkSelectAllGroups()\"\n (ngValueChange)=\"selectAllsearchgroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n </div>\n <div class=\"user-list-item\">\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n <li\n class=\"vx-mb-4\"\n *ngFor=\"let data of groups; let i = index\"\n >\n <app-cs-checkbox\n (ngValueChange)=\"selectGroupElement(data)\"\n [disabled]=\"false\"\n [ngValue]=\"\n selectedgroupList.length > 0 &&\n selectedGroupIds.includes(data[listDetails.groupIdkey])\n \"\n >\n <div class=\"user-name vx-d-flex vx-align-center\">\n <div\n class=\"group-name\"\n [arTooltip]=\"data[listDetails.displayGroupKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ data[listDetails.displayGroupKey] }}\n </div>\n <span\n id=\"usersofgroup\"\n class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n >{{ data[\"associatedUsers\"].length }}\n {{\n data[\"associatedUsers\"].length > 1\n ? \"USERS\"\n : \"USER\"\n }}</span\n >\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n <app-no-data\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"\n searchKey?.length > 0\n ? 'No match found.'\n : 'No data to display.'\n \"\n ></app-no-data>\n </ng-container>\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n <div\n class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"left vx-d-flex vx-align-center\">\n <button\n class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedList?.length\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ selectedList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedList?.length === 1\"\n >User\n {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n >\n <span *ngIf=\"selectedList?.length > 1\"\n >Users\n {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n >\n </div>\n <button\n class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedgroupList?.length\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"left\"\n >\n {{ selectedgroupList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedgroupList?.length === 1\"\n >User Group selected</span\n >\n <span *ngIf=\"selectedgroupList?.length > 1\"\n >User Groups selected</span\n >\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"selectElement(element)\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n element?.member_id\n )\n \"\n >&#xe90d;</i\n >\n {{ element.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 element of selectedgroupList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element?.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)=\"selectGroupElement(element)\"\n >&#xe90d;</i\n >\n {{ element?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <div class=\"right vx-d-flex vx-align-center\">\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n <button [disabled]=\"false\" (click)=\"onSubmit()\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n <app-dashboard-footer\n [footerDetails]=\"footerDetails\"\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n (deleteEvent)=\"selectElement($event)\"\n (submitEvent)=\"onSubmit()\"\n [userButtonColor]=\"'greenBg'\"\n ></app-dashboard-footer>\n </div>\n </div>\n</div>\n", styles: ["@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\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: 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: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { 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: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
2395
2412
  }
2396
2413
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, decorators: [{
2397
2414
  type: Component,
2398
- args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n <div\n class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n Who can view this dashboard?\n </div>\n </div>\n <div class=\"user-list-body\">\n <div\n class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"groupsEnabled\"\n >\n <button\n (click)=\"switchTab('USER')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER'\"\n >\n USERS\n <span\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalList }}</span\n >\n </button>\n <button\n id=\"switchtab\"\n (click)=\"switchTab('GROUP')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'GROUP'\"\n >\n USER GROUPS\n <span\n id=\"groupscount\"\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalgroups }}</span\n >\n </button>\n </div>\n\n <div class=\"user-list-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n [(ngModel)]=\"searchValue\"\n placeholder=\"{{\n currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n }} who can view this dashboard\"\n (keyup.enter)=\"setSearchValue()\"\n (focusout)=\"setSearchValue()\"\n />\n </div>\n\n <ng-container *ngIf=\"currentTab === 'USER'\">\n <div\n class=\"vx-d-flex vx-align-center vx-justify-end\"\n *ngIf=\"totalPages > 1\"\n >\n <div\n class=\"pagination-box\"\n *ngIf=\"totalPages > 1 && searchList.length > 1\"\n >\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n ></app-pagination>\n </div>\n </div>\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n <app-cs-checkbox\n *ngIf=\"!searchValue && searchList.length > 1\"\n [ngValue]=\"selectedList.length == totalList\"\n (ngValueChange)=\"selectAllUsers($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"searchValue && searchList.length > 1\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"list-of-user\">\n <div\n class=\"selection-list vx-mb-4\"\n [class.with-group]=\"groupsEnabled\"\n [class.with-noData]=\"searchList.length == 0\"\n [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n >\n <ul *ngIf=\"searchList.length !== 0\">\n <li *ngFor=\"let data of searchList; let i = index\">\n <app-cs-checkbox\n [disabled]=\"\n listDetails.nonRemovableUsersList.includes(\n data[listDetails.elementIdKey]\n )\n \"\n [ngValue]=\"\n selectedList.length > 0 &&\n selectedIds.includes(data[listDetails.elementIdKey])\n \"\n (ngValueChange)=\"selectElement(data)\"\n [arTooltip]=\"data[listDetails.tooltipKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n >\n </li>\n </ul>\n\n <app-no-data\n *ngIf=\"!vLoader && searchList.length == 0\"\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"'No data to display'\"\n ></app-no-data>\n </div>\n\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n <ng-container *ngIf=\"groupdata as groups\">\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"total_group_pages\"\n [totalList]=\"totalgroups\"\n ></app-pagination>\n </div>\n </div>\n <ng-container *ngIf=\"true\">\n <div\n class=\"user-list-mid vx-mb-4\"\n [class.with-pagination]=\"total_group_pages > 1\"\n >\n <ng-container *ngIf=\"groups?.length > 0\">\n <div class=\"user-list-select vx-mb-4\">\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"!searchValue && groups.length > 1\"\n [ngValue]=\"selectedgroupList.length == totalgroups\"\n (ngValueChange)=\"selectAllGroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"searchValue && groups.length > 1\"\n [ngValue]=\"checkSelectAllGroups()\"\n (ngValueChange)=\"selectAllsearchgroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n </div>\n <div class=\"user-list-item\">\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n <li\n class=\"vx-mb-4\"\n *ngFor=\"let data of groups; let i = index\"\n >\n <app-cs-checkbox\n (ngValueChange)=\"selectGroupElement(data)\"\n [disabled]=\"false\"\n [ngValue]=\"\n selectedgroupList.length > 0 &&\n selectedGroupIds.includes(data[listDetails.groupIdkey])\n \"\n >\n <div class=\"user-name vx-d-flex vx-align-center\">\n <div\n class=\"group-name\"\n [arTooltip]=\"data[listDetails.displayGroupKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ data[listDetails.displayGroupKey] }}\n </div>\n <span\n id=\"usersofgroup\"\n class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n >{{ data[\"associatedUsers\"].length }}\n {{\n data[\"associatedUsers\"].length > 1\n ? \"USERS\"\n : \"USER\"\n }}</span\n >\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n <app-no-data\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"\n (searchValue?.length > 0\n ? 'No match found.'\n : 'No data to display.'\n )\n \"\n ></app-no-data>\n </ng-container>\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n <div\n class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"left vx-d-flex vx-align-center\">\n <button\n class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedList?.length\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ selectedList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedList?.length === 1\"\n >User\n {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n >\n <span *ngIf=\"selectedList?.length > 1\"\n >Users\n {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n >\n </div>\n <button\n class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedgroupList?.length\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"left\"\n >\n {{ selectedgroupList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedgroupList?.length === 1\"\n >User Group selected</span\n >\n <span *ngIf=\"selectedgroupList?.length > 1\"\n >User Groups selected</span\n >\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"selectElement(element)\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n element?.member_id\n )\n \"\n >&#xe90d;</i\n >\n {{ element.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 element of selectedgroupList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element?.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)=\"selectGroupElement(element)\"\n >&#xe90d;</i\n >\n {{ element?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <div class=\"right vx-d-flex vx-align-center\">\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n <button [disabled]=\"false\" (click)=\"onSubmit()\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n <app-dashboard-footer\n [footerDetails]=\"footerDetails\"\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n (deleteEvent)=\"selectElement($event)\"\n (submitEvent)=\"onSubmit()\"\n [userButtonColor]=\"'greenBg'\"\n ></app-dashboard-footer>\n </div>\n </div>\n</div>\n", styles: ["@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
2415
+ args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\n <div\n class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n Who can view this dashboard?\n </div>\n </div>\n <div class=\"user-list-body\">\n <div\n class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"groupsEnabled\"\n >\n <button\n (click)=\"switchTab('USER')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER'\"\n >\n USERS\n <span\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalList }}</span\n >\n </button>\n <button\n id=\"switchtab\"\n (click)=\"switchTab('GROUP')\"\n class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'GROUP'\"\n >\n USER GROUPS\n <span\n id=\"groupscount\"\n class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n >{{ totalgroups }}</span\n >\n </button>\n </div>\n\n <div class=\"user-list-search vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n [(ngModel)]=\"searchValue\"\n placeholder=\"{{\n currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'\n }} who can view this dashboard\"\n (keyup.enter)=\"setSearchValue()\"\n (focusout)=\"setSearchValue()\"\n />\n </div>\n\n <ng-container *ngIf=\"currentTab === 'USER'\">\n <div\n class=\"vx-d-flex vx-align-center vx-justify-end\"\n *ngIf=\"totalPages > 1\"\n >\n <div\n class=\"pagination-box\"\n *ngIf=\"totalPages > 1 && searchList.length > 1\"\n >\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"totalPages\"\n [totalList]=\"totalList\"\n ></app-pagination>\n </div>\n </div>\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\n <app-cs-checkbox\n *ngIf=\"!searchValue && searchList.length > 1\"\n [ngValue]=\"selectedList.length == totalList\"\n (ngValueChange)=\"selectAllUsers($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"searchValue && searchList.length > 1\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <strong>{{\n selectedList.length == totalList ? \"Deselect All\" : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"list-of-user\">\n <div\n class=\"selection-list vx-mb-4\"\n [class.with-group]=\"groupsEnabled\"\n [class.with-noData]=\"searchList.length == 0\"\n [class.with-pagination]=\"totalPages > 1 && searchList.length > 1\"\n >\n <ul *ngIf=\"searchList.length !== 0\">\n <li *ngFor=\"let data of searchList; let i = index\">\n <app-cs-checkbox\n [disabled]=\"\n listDetails.nonRemovableUsersList.includes(\n data[listDetails.elementIdKey]\n )\n \"\n [ngValue]=\"\n selectedList.length > 0 &&\n selectedIds.includes(data[listDetails.elementIdKey])\n \"\n (ngValueChange)=\"selectElement(data)\"\n [arTooltip]=\"data[listDetails.tooltipKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox\n >\n </li>\n </ul>\n\n <app-no-data\n *ngIf=\"!vLoader && searchList.length == 0\"\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"'No data to display'\"\n ></app-no-data>\n </div>\n\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\n <ng-container *ngIf=\"groupdata as groups\">\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\n <div class=\"pagination-box\" *ngIf=\"total_group_pages > 1\">\n <app-pagination\n (paginationFilter)=\"paginationFilter($event)\"\n [limit]=\"limit\"\n [totalPages]=\"total_group_pages\"\n [totalList]=\"totalgroups\"\n ></app-pagination>\n </div>\n </div>\n <ng-container *ngIf=\"true\">\n <div\n class=\"user-list-mid vx-mb-4\"\n [class.with-pagination]=\"total_group_pages > 1\"\n >\n <ng-container *ngIf=\"groups?.length > 0\">\n <div class=\"user-list-select vx-mb-4\">\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"!searchValue && groups.length > 1\"\n [ngValue]=\"selectedgroupList.length == totalgroups\"\n (ngValueChange)=\"selectAllGroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n <app-cs-checkbox\n [disabled]=\"false\"\n *ngIf=\"searchValue && groups.length > 1\"\n [ngValue]=\"checkSelectAllGroups()\"\n (ngValueChange)=\"selectAllsearchgroups($event)\"\n >\n <div\n class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n >\n {{\n selectedgroupList.length == totalgroups\n ? \"Deselect All\"\n : \"Select All\"\n }}\n </div>\n </app-cs-checkbox>\n </div>\n <div class=\"user-list-item\">\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n <li\n class=\"vx-mb-4\"\n *ngFor=\"let data of groups; let i = index\"\n >\n <app-cs-checkbox\n (ngValueChange)=\"selectGroupElement(data)\"\n [disabled]=\"false\"\n [ngValue]=\"\n selectedgroupList.length > 0 &&\n selectedGroupIds.includes(data[listDetails.groupIdkey])\n \"\n >\n <div class=\"user-name vx-d-flex vx-align-center\">\n <div\n class=\"group-name\"\n [arTooltip]=\"data[listDetails.displayGroupKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ data[listDetails.displayGroupKey] }}\n </div>\n <span\n id=\"usersofgroup\"\n class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\"\n >{{ data[\"associatedUsers\"].length }}\n {{\n data[\"associatedUsers\"].length > 1\n ? \"USERS\"\n : \"USER\"\n }}</span\n >\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\n <app-no-data\n [noDataImage]=\"ASSETS.search_data\"\n [noDataText]=\"\n searchKey?.length > 0\n ? 'No match found.'\n : 'No data to display.'\n \"\n ></app-no-data>\n </ng-container>\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\n <div\n class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"left vx-d-flex vx-align-center\">\n <button\n class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedList?.length\"\n appPopover\n (click)=\"userCount.popover()\"\n placement=\"left\"\n >\n {{ selectedList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedList?.length === 1\"\n >User\n {{ selectedgroupList?.length > 0 ? \" & \" : \"selected\" }}</span\n >\n <span *ngIf=\"selectedList?.length > 1\"\n >Users\n {{ selectedgroupList?.length > 0 ? \" & \" : \"are selected\" }}</span\n >\n </div>\n <button\n class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\"\n *ngIf=\"selectedgroupList?.length\"\n appPopover\n (click)=\"groupCount.popover()\"\n placement=\"left\"\n >\n {{ selectedgroupList?.length }}\n </button>\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n <span *ngIf=\"selectedgroupList?.length === 1\"\n >User Group selected</span\n >\n <span *ngIf=\"selectedgroupList?.length > 1\"\n >User Groups selected</span\n >\n </div>\n\n <app-popover #userCount [dontCloseonClick]=\"true\">\n <div class=\"action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons cross-icon\"\n (click)=\"selectElement(element)\"\n *ngIf=\"\n !listDetails.nonRemovableUsersList.includes(\n element?.member_id\n )\n \"\n >&#xe90d;</i\n >\n {{ element.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 element of selectedgroupList\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [arTooltip]=\"element?.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)=\"selectGroupElement(element)\"\n >&#xe90d;</i\n >\n {{ element?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <div class=\"right vx-d-flex vx-align-center\">\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\n <button [disabled]=\"false\" (click)=\"onSubmit()\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\n <app-dashboard-footer\n [footerDetails]=\"footerDetails\"\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset()\"\n (deleteEvent)=\"selectElement($event)\"\n (submitEvent)=\"onSubmit()\"\n [userButtonColor]=\"'greenBg'\"\n ></app-dashboard-footer>\n </div>\n </div>\n</div>\n", styles: ["@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
2399
2416
  }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
2400
2417
  type: Output
2401
2418
  }], saveSelectedUsers: [{
@@ -3282,6 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3282
3299
  type: Output
3283
3300
  }] } });
3284
3301
 
3302
+ dayjs.extend(LocalizedFormat);
3285
3303
  class CreateDashboardComponent {
3286
3304
  createDashboardService;
3287
3305
  paginationService;
@@ -3785,7 +3803,7 @@ class CreateDashboardComponent {
3785
3803
  else if (this.mode === 'EDIT') {
3786
3804
  const widgetsArray = [];
3787
3805
  data.forEach((element) => {
3788
- if (!this.extractWidgetCodes(this.dashboardForm.configureWidget).includes(element.id)) {
3806
+ if (!JSON.stringify(this.dashboardForm.configureWidget).includes(element.id)) {
3789
3807
  let obj = {};
3790
3808
  obj.module_name = element.module;
3791
3809
  obj._id = '';
@@ -3838,15 +3856,6 @@ class CreateDashboardComponent {
3838
3856
  this.openConfigureWidgets = false;
3839
3857
  this.submitDashboard();
3840
3858
  }
3841
- extractWidgetCodes(widgets) {
3842
- const widgetCodes = [];
3843
- widgets?.forEach((widget) => {
3844
- if (widget?.widget_code) {
3845
- widgetCodes.push(widget?.widget_code);
3846
- }
3847
- });
3848
- return widgetCodes;
3849
- }
3850
3859
  closeConfigureWidgets(event) {
3851
3860
  this.openConfigureWidgets = event;
3852
3861
  }
@@ -4344,11 +4353,11 @@ class CreateDashboardComponent {
4344
4353
  }
4345
4354
  }
4346
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 });
4347
- 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" }] });
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?.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" }] });
4348
4357
  }
4349
4358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
4350
4359
  type: Component,
4351
- 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"] }]
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?.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"] }]
4352
4361
  }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
4353
4362
  type: Input
4354
4363
  }], mode: [{
@@ -5395,14 +5404,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5395
5404
  }]
5396
5405
  }] });
5397
5406
 
5407
+ class ConfigureBaseUrlService {
5408
+ ASSETS = ASSETS;
5409
+ env;
5410
+ constructor(config) {
5411
+ if (config) {
5412
+ this.env = config?.envConfig;
5413
+ }
5414
+ }
5415
+ updateBaseUrl() {
5416
+ Object.keys(this.ASSETS).forEach((key) => {
5417
+ this.ASSETS[key] = `${this.env?.cdnUrl}${this.ASSETS[key]}`;
5418
+ });
5419
+ }
5420
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
5421
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, providedIn: 'root' });
5422
+ }
5423
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, decorators: [{
5424
+ type: Injectable,
5425
+ args: [{
5426
+ providedIn: 'root',
5427
+ }]
5428
+ }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
5429
+ type: Optional
5430
+ }] }]; } });
5431
+
5398
5432
  class CreateDashboardModule {
5433
+ configureBaseUrlService;
5434
+ constructor(configureBaseUrlService) {
5435
+ this.configureBaseUrlService = configureBaseUrlService;
5436
+ this.setBaseUrl();
5437
+ }
5399
5438
  static forRoot(environmentConfig) {
5400
5439
  return {
5401
5440
  ngModule: CreateDashboardModule,
5402
5441
  providers: [{ provide: Configurations, useValue: environmentConfig }],
5403
5442
  };
5404
5443
  }
5405
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
5444
+ setBaseUrl() {
5445
+ this.configureBaseUrlService.updateBaseUrl();
5446
+ }
5447
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [{ token: ConfigureBaseUrlService }], target: i0.ɵɵFactoryTarget.NgModule });
5406
5448
  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
5407
5449
  UserListComponent,
5408
5450
  FormGroupComponent,
@@ -5486,7 +5528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5486
5528
  ],
5487
5529
  exports: [CreateDashboardComponent],
5488
5530
  }]
5489
- }] });
5531
+ }], ctorParameters: function () { return [{ type: ConfigureBaseUrlService }]; } });
5490
5532
 
5491
5533
  /*
5492
5534
  * Public API Surface of create-dashboard