vc-create-dashboard 2.1.5 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/bundles/create-dashboard.umd.js +215 -34
  2. package/bundles/create-dashboard.umd.js.map +1 -1
  3. package/create-dashboard.metadata.json +1 -1
  4. package/esm2015/lib/create-dashboard-container/categories/categories.component.js +4 -3
  5. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.js +108 -4
  6. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.ngfactory.js +17 -15
  7. package/esm2015/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.ngsummary.json +1 -1
  8. package/esm2015/lib/create-dashboard-container/create-dashboard.component.js +81 -16
  9. package/esm2015/lib/create-dashboard-container/create-dashboard.component.ngfactory.js +2 -2
  10. package/esm2015/lib/create-dashboard-container/responsibility-center/responsibility-center.component.js +4 -3
  11. package/esm2015/lib/create-dashboard-container/services/create-dashboard.service.js +14 -3
  12. package/esm2015/lib/create-dashboard-container/services/create-dashboard.service.ngsummary.json +1 -1
  13. package/fesm2015/create-dashboard.js +206 -24
  14. package/fesm2015/create-dashboard.js.map +1 -1
  15. package/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.d.ts +10 -0
  16. package/lib/create-dashboard-container/create-dashboard.component.d.ts +1 -0
  17. package/lib/create-dashboard-container/services/create-dashboard.service.d.ts +2 -1
  18. package/package.json +1 -1
package/fesm2015/create-dashboard.js CHANGED
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { Injectable, Optional, EventEmitter, Component, ChangeDetectorRef, Input, Output, ViewChild, HostListener, forwardRef, Pipe, NgModule, Directive, ElementRef, Renderer2, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
3
3
  import * as i1 from '@angular/common/http';
4
4
  import { HttpClient, HttpHeaders } from '@angular/common/http';
5
+ import { JwtHelperService } from '@auth0/angular-jwt';
5
6
  import { of, BehaviorSubject, Subject } from 'rxjs';
6
7
  import { map, retry, catchError } from 'rxjs/operators';
7
8
  import * as moment from 'moment';
@@ -128,8 +129,18 @@ class CreateDashboardService {
128
129
  updateDashboard(id, payload) {
129
130
  return this.http.put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions).pipe(retry(2));
130
131
  }
131
- getSubscriptionList() {
132
- return this.http.get(this.env.OrganizationGet + 'subscriptionList', this.httpOptions).pipe(retry(2));
132
+ getUserInformation() {
133
+ return this.http.get(this.env.organizationGet + 'users&id=' + this._ID(), this.httpOptions).pipe(retry(2));
134
+ }
135
+ _ID() {
136
+ const helper = new JwtHelperService();
137
+ const myRawToken = localStorage.getItem('currentUser') || '{}';
138
+ const isExpired = helper === null || helper === void 0 ? void 0 : helper.isTokenExpired(myRawToken);
139
+ if (isExpired === false) {
140
+ const tokenInfo = helper === null || helper === void 0 ? void 0 : helper.decodeToken(myRawToken);
141
+ return tokenInfo._id;
142
+ }
143
+ return '';
133
144
  }
134
145
  checkDuplicateDashboardName(payload) {
135
146
  return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(retry(2));
@@ -479,6 +490,7 @@ class CreateDashboardComponent {
479
490
  };
480
491
  this.openConfigureWidgets = false;
481
492
  this.selectedWidgets = [];
493
+ this.displayedWidgets = [];
482
494
  this.responsibilityCentersList = [];
483
495
  this.datePickerOverlay = false;
484
496
  this.dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
@@ -532,9 +544,13 @@ class CreateDashboardComponent {
532
544
  this.getComplianceCategoryList();
533
545
  this.checkWhetherAllListsLoaded();
534
546
  this.getUsersList('');
535
- this.createDashboardService.getSubscriptionList().subscribe((res) => {
536
- if (res[0].risk_flag) {
537
- this.showRiskCategory = res[0].risk_flag;
547
+ this.createDashboardService.getUserInformation().subscribe((res) => {
548
+ const quickLink = res.quick_link;
549
+ if (quickLink.risk) {
550
+ this.showRiskCategory = true;
551
+ }
552
+ else {
553
+ this.showRiskCategory = false;
538
554
  }
539
555
  }, error => { console.log(error); });
540
556
  this.setFrequency("2~1~0~0", 'import');
@@ -562,6 +578,14 @@ class CreateDashboardComponent {
562
578
  this.datePickerOverlay = true;
563
579
  }
564
580
  closeFromDatePicker() {
581
+ if (!this.dashboardForm.selectedFromDate) {
582
+ this.dashboardForm.selectedToDate = undefined;
583
+ this.hideToDate = true;
584
+ setTimeout(() => {
585
+ this.hideToDate = false;
586
+ }, 20);
587
+ return;
588
+ }
565
589
  let minToDate = this.setToDate(this.dashboardForm.selectedFromDate);
566
590
  this.toDatePickerConfig = { min: minToDate };
567
591
  const fromDate = new Date(minToDate.split('-').reverse().join('-'));
@@ -796,14 +820,16 @@ class CreateDashboardComponent {
796
820
  }
797
821
  else {
798
822
  const index = this.selectedWidgets.findIndex((ele) => ele.widget_code == element.id);
799
- this.selectedWidgets[index].state = 'ACTIVE';
800
- if (this.selectedWidgets[index].sub_widgets.length > 0) {
801
- this.selectedWidgets[index].sub_widgets.forEach((subWidgetData) => {
802
- const elementIndex = element.subWidgets.findIndex((ele) => ele.id == subWidgetData.widget_code);
803
- if (elementIndex != -1) {
804
- subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
805
- }
806
- });
823
+ if (index != -1) {
824
+ this.selectedWidgets[index].state = 'ACTIVE';
825
+ if (this.selectedWidgets[index].sub_widgets.length > 0) {
826
+ this.selectedWidgets[index].sub_widgets.forEach((subWidgetData) => {
827
+ const elementIndex = element.subWidgets.findIndex((ele) => ele.id == subWidgetData.widget_code);
828
+ if (elementIndex != -1) {
829
+ subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
830
+ }
831
+ });
832
+ }
807
833
  }
808
834
  }
809
835
  });
@@ -812,7 +838,7 @@ class CreateDashboardComponent {
812
838
  if (index == -1) {
813
839
  savedWidget.state = 'INACTIVE';
814
840
  if (savedWidget.sub_widgets.length > 0) {
815
- savedWidget.subWidgets.forEach((saveSubWidget) => {
841
+ savedWidget.sub_widgets.forEach((saveSubWidget) => {
816
842
  saveSubWidget.state = 'INACTIVE';
817
843
  });
818
844
  }
@@ -852,6 +878,14 @@ class CreateDashboardComponent {
852
878
  switch (type) {
853
879
  case 'rc':
854
880
  this.dashboardForm.selectedResponsibilityCenters = this.setList(this.responsibilityCentersList, selectedItems, 'item_id');
881
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
882
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
883
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
884
+ }
885
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
886
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
887
+ }
888
+ }
855
889
  break;
856
890
  case 'whoCanView':
857
891
  this.dashboardForm.selectedViewers = selectedItems;
@@ -859,27 +893,52 @@ class CreateDashboardComponent {
859
893
  break;
860
894
  case 'responsibilityCategories':
861
895
  this.dashboardForm.selectedResponsibilityCategories = selectedItems;
896
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
897
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
898
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
899
+ }
900
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
901
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
902
+ }
903
+ }
862
904
  break;
863
905
  case 'riskCategory':
864
906
  this.dashboardForm.selectedRiskCategories = selectedItems;
907
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
908
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
909
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
910
+ }
911
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
912
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
913
+ }
914
+ }
865
915
  break;
866
916
  }
867
917
  this.activateSelector('', false);
868
918
  }
869
919
  remove(type, event, removeIndex) {
920
+ var _a, _b;
870
921
  switch (type) {
871
922
  case 'rc':
872
923
  const rcIndex = this.dashboardForm.selectedResponsibilityCenters.findIndex((rc) => rc.rc_id == event.rc_id);
873
924
  if (rcIndex !== -1) {
874
925
  const parentRc = this.dashboardForm.selectedResponsibilityCenters[rcIndex];
875
926
  this.dashboardForm.selectedResponsibilityCenters.splice(rcIndex, 1);
876
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
927
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
877
928
  parentRc.item_child_ids.forEach((childElement) => {
878
929
  const removeIndex = this.dashboardForm.selectedResponsibilityCenters.findIndex((removeElement) => removeElement.rc_id == childElement);
879
930
  this.dashboardForm.selectedResponsibilityCenters.splice(removeIndex, 1);
880
931
  });
881
932
  }
882
933
  }
934
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
935
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
936
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
937
+ }
938
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
939
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
940
+ }
941
+ }
883
942
  break;
884
943
  case 'whoCanView':
885
944
  const reviewerIndex = this.dashboardForm.selectedViewers.findIndex((viewer) => viewer.member_id == event.member_id);
@@ -888,13 +947,21 @@ class CreateDashboardComponent {
888
947
  case 'responsibilityCategories':
889
948
  const CCcategoryIndex = this.dashboardForm.selectedResponsibilityCategories.findIndex((CCcategory) => CCcategory.category_id == event.category_id);
890
949
  this.dashboardForm.selectedResponsibilityCategories.splice(CCcategoryIndex, 1);
950
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
951
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
952
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
953
+ }
954
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
955
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
956
+ }
957
+ }
891
958
  break;
892
959
  case 'riskCategory':
893
960
  const riskCategoryIndex = this.dashboardForm.selectedRiskCategories.findIndex((riskCategory) => riskCategory.category_id == event.category_id);
894
961
  if (riskCategoryIndex !== -1) {
895
962
  const parent = this.dashboardForm.selectedRiskCategories[riskCategoryIndex];
896
963
  this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
897
- if ((parent === null || parent === void 0 ? void 0 : parent.child_cat_ids.length) > 0) {
964
+ if (((_b = parent === null || parent === void 0 ? void 0 : parent.child_cat_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
898
965
  parent.child_cat_ids.forEach((childElement) => {
899
966
  const removeIndex = this.dashboardForm.selectedRiskCategories.findIndex((removeElement) => removeElement.category_id == childElement);
900
967
  this.dashboardForm.selectedRiskCategories.splice(removeIndex, 1);
@@ -902,6 +969,14 @@ class CreateDashboardComponent {
902
969
  }
903
970
  }
904
971
  this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
972
+ if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
973
+ if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
974
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'COMPLIANCE');
975
+ }
976
+ else if (this.dashboardForm.selectedRiskCategories.length == 0) {
977
+ this.selectedWidgets = this.selectedWidgets.filter((element) => element.module_name != 'RISK');
978
+ }
979
+ }
905
980
  break;
906
981
  }
907
982
  }
@@ -1050,6 +1125,7 @@ class CreateDashboardComponent {
1050
1125
  this.vLoader = false;
1051
1126
  this.dashboardForm.configureWidget = data.widget_details;
1052
1127
  this.selectedWidgets = data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
1128
+ this.displayedWidgets = data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
1053
1129
  this.setFrequency(data.email_summary, 'import');
1054
1130
  let minToDate = this.setToDate(data.timeframe.start_date);
1055
1131
  this.toDatePickerConfig = { min: minToDate };
@@ -1147,7 +1223,7 @@ class CreateDashboardComponent {
1147
1223
  CreateDashboardComponent.decorators = [
1148
1224
  { type: Component, args: [{
1149
1225
  selector: 'app-create-dashboard',
1150
- template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n dashboardForm?.dashboardDescriptionText.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n class=\"required\">*</span></label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'user'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n <i class=\"icons\">&#xeabe;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
1226
+ template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n dashboardForm?.dashboardDescriptionText.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && dashboardForm?.dashboardDescriptionText?.length>250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who can view this dashboard?<span\r\n class=\"required\">*</span></label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value\">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'user'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"select\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"select\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left\" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe90c;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\">\r\n <i class=\"icons\">&#xeabe;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>",
1151
1227
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/forms/forms.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:50%;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:initial;position:relative;border-radius:0 0 0 30px;background:#0000}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .select:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{display:flex!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:#0000;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:#0000;color:#fff;border-color:#fff}"]
1152
1228
  },] }
1153
1229
  ];
@@ -1578,6 +1654,7 @@ class ResponsibilityCenterComponent {
1578
1654
  }, 300);
1579
1655
  }
1580
1656
  selectRc(rc, mode) {
1657
+ var _a, _b;
1581
1658
  if (this.radioSelection) {
1582
1659
  if (mode) {
1583
1660
  this.selectedIds = [];
@@ -1591,7 +1668,7 @@ class ResponsibilityCenterComponent {
1591
1668
  const rcElement = this.responsibilityCentersList.findIndex((ele) => ele.item_id == rc);
1592
1669
  if (rcElement !== -1) {
1593
1670
  const parentRc = this.responsibilityCentersList[rcElement];
1594
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
1671
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1595
1672
  parentRc.item_child_ids.forEach((childElement) => {
1596
1673
  if (!this.selectedIds.includes(childElement)) {
1597
1674
  this.selectedIds.push(childElement);
@@ -1606,7 +1683,7 @@ class ResponsibilityCenterComponent {
1606
1683
  const rcElement = this.responsibilityCentersList.findIndex((ele) => ele.item_id == rc);
1607
1684
  if (rcElement !== -1) {
1608
1685
  const parentRc = this.responsibilityCentersList[rcElement];
1609
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids.length) > 0) {
1686
+ if (((_b = parentRc === null || parentRc === void 0 ? void 0 : parentRc.item_child_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1610
1687
  parentRc.item_child_ids.forEach((childElement) => {
1611
1688
  const removeIndex = this.selectedIds.findIndex((removeElement) => removeElement == childElement);
1612
1689
  this.selectedIds.splice(removeIndex, 1);
@@ -1732,12 +1809,13 @@ class CategoriesComponent {
1732
1809
  this.setList();
1733
1810
  }
1734
1811
  selectCategory(mode, activeTab, category) {
1812
+ var _a, _b;
1735
1813
  if (mode) {
1736
1814
  this.selectedIds.push(category[this.categoryIdKey]);
1737
1815
  const rcElement = this.allCategories.findIndex((ele) => ele.category_id == category[this.categoryIdKey]);
1738
1816
  if (rcElement !== -1) {
1739
1817
  const parentRc = this.allCategories[rcElement];
1740
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids.length) > 0) {
1818
+ if (((_a = parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1741
1819
  parentRc.child_cat_ids.forEach((childElement) => {
1742
1820
  if (!this.selectedIds.includes(childElement)) {
1743
1821
  this.selectedIds.push(childElement);
@@ -1752,7 +1830,7 @@ class CategoriesComponent {
1752
1830
  const rcElement = this.allCategories.findIndex((ele) => ele.category_id == category[this.categoryIdKey]);
1753
1831
  if (rcElement !== -1) {
1754
1832
  const parentRc = this.allCategories[rcElement];
1755
- if ((parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids.length) > 0) {
1833
+ if (((_b = parentRc === null || parentRc === void 0 ? void 0 : parentRc.child_cat_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1756
1834
  parentRc.child_cat_ids.forEach((childElement) => {
1757
1835
  const removeIndex = this.selectedIds.findIndex((removeElement) => removeElement == childElement);
1758
1836
  this.selectedIds.splice(removeIndex, 1);
@@ -3599,13 +3677,17 @@ class ConfigureWidgetsComponent {
3599
3677
  this.selectedWidgets = [];
3600
3678
  this.module = 'COMPLIANCE';
3601
3679
  this.selectedWidgetsData = [];
3680
+ this.displayedWidgets = [];
3602
3681
  this.showRisk = false;
3603
3682
  this.showCompliance = false;
3683
+ this.mode = 'CREATE';
3604
3684
  this.noDataText = 'You have not configured any widgets. Click on the <strong>Configure Widgets</strong> button to begin.';
3605
3685
  this.selectedWidgetIds = [];
3606
3686
  this.subResponsibilitiesSelected = false;
3607
3687
  this.subKeyResponsibilitiesSelected = false;
3608
3688
  this.showWidgets = true;
3689
+ this.complianceWidgetsDisplayCount = 9;
3690
+ this.riskWidgetsDisplayCount = 12;
3609
3691
  this.widgetsList = {
3610
3692
  COMPLIANCE: [
3611
3693
  {
@@ -3614,6 +3696,7 @@ class ConfigureWidgetsComponent {
3614
3696
  description: 'Overview shows the performance of responsibilities and Responsibility Categories.',
3615
3697
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
3616
3698
  value: false,
3699
+ visibility: true,
3617
3700
  module: 'COMPLIANCE',
3618
3701
  subWidgets: []
3619
3702
  },
@@ -3623,6 +3706,7 @@ class ConfigureWidgetsComponent {
3623
3706
  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.',
3624
3707
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-calender.png',
3625
3708
  value: false,
3709
+ visibility: true,
3626
3710
  module: 'COMPLIANCE',
3627
3711
  subWidgets: []
3628
3712
  },
@@ -3630,8 +3714,9 @@ class ConfigureWidgetsComponent {
3630
3714
  title: 'Responsibility Center Overview',
3631
3715
  id: 'responsibility_center_overview_flag',
3632
3716
  description: 'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
3633
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
3717
+ widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-center-overview.png',
3634
3718
  value: false,
3719
+ visibility: true,
3635
3720
  module: 'COMPLIANCE',
3636
3721
  subWidgets: []
3637
3722
  },
@@ -3642,22 +3727,26 @@ class ConfigureWidgetsComponent {
3642
3727
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/my-responsibilities.png',
3643
3728
  tabOption: true,
3644
3729
  value: false,
3730
+ visibility: true,
3645
3731
  module: 'COMPLIANCE',
3646
3732
  subWidgets: [
3647
3733
  {
3648
3734
  title: 'My Responsibilities',
3649
3735
  id: 'my_responsibility_flag',
3650
3736
  value: false,
3737
+ visibility: true,
3651
3738
  },
3652
3739
  {
3653
3740
  title: 'I’m Reviewing',
3654
3741
  id: 'reviewer_responsibility_flag',
3655
3742
  value: false,
3743
+ visibility: true,
3656
3744
  },
3657
3745
  {
3658
3746
  title: 'I’m Overseeing',
3659
3747
  id: 'cc_responsibility_flag',
3660
3748
  value: false,
3749
+ visibility: true,
3661
3750
  }
3662
3751
  ]
3663
3752
  },
@@ -3668,27 +3757,32 @@ class ConfigureWidgetsComponent {
3668
3757
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/key-responsibilities.png',
3669
3758
  tabOption: true,
3670
3759
  value: false,
3760
+ visibility: true,
3671
3761
  module: 'COMPLIANCE',
3672
3762
  subWidgets: [
3673
3763
  {
3674
3764
  title: 'Overview',
3675
3765
  id: 'key_responsibilities_overview_flag',
3676
3766
  value: false,
3767
+ visibility: true,
3677
3768
  },
3678
3769
  {
3679
3770
  title: 'My Responsibilities',
3680
3771
  id: 'key_my_responsibilities_flag',
3681
3772
  value: false,
3773
+ visibility: true,
3682
3774
  },
3683
3775
  {
3684
3776
  title: 'I’m Reviewing',
3685
3777
  id: 'key_i_am_reviewing_flag',
3686
3778
  value: false,
3779
+ visibility: true,
3687
3780
  },
3688
3781
  {
3689
3782
  title: 'I’m Overseeing',
3690
3783
  id: 'key_i_am_overseeing_flag',
3691
3784
  value: false,
3785
+ visibility: true,
3692
3786
  }
3693
3787
  ]
3694
3788
  },
@@ -3698,6 +3792,7 @@ class ConfigureWidgetsComponent {
3698
3792
  description: 'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
3699
3793
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/trend-analysis.png',
3700
3794
  value: false,
3795
+ visibility: true,
3701
3796
  module: 'COMPLIANCE',
3702
3797
  subWidgets: []
3703
3798
  },
@@ -3707,6 +3802,7 @@ class ConfigureWidgetsComponent {
3707
3802
  description: 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
3708
3803
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/workroom-updates.png',
3709
3804
  value: false,
3805
+ visibility: true,
3710
3806
  module: 'COMPLIANCE',
3711
3807
  subWidgets: []
3712
3808
  },
@@ -3716,6 +3812,7 @@ class ConfigureWidgetsComponent {
3716
3812
  description: 'This is a chronological view of the recent updates of responsibilities.',
3717
3813
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/recent-activities.png',
3718
3814
  value: false,
3815
+ visibility: true,
3719
3816
  module: 'COMPLIANCE',
3720
3817
  subWidgets: []
3721
3818
  },
@@ -3725,6 +3822,7 @@ class ConfigureWidgetsComponent {
3725
3822
  description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
3726
3823
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/exception-summary.png',
3727
3824
  value: false,
3825
+ visibility: true,
3728
3826
  module: 'COMPLIANCE',
3729
3827
  subWidgets: []
3730
3828
  }
@@ -3736,6 +3834,7 @@ class ConfigureWidgetsComponent {
3736
3834
  description: 'This widget shows the number and percentage of risks within each risk response strategy.',
3737
3835
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-overview.png',
3738
3836
  value: false,
3837
+ visibility: true,
3739
3838
  module: 'RISK',
3740
3839
  subWidgets: []
3741
3840
  },
@@ -3745,27 +3844,32 @@ class ConfigureWidgetsComponent {
3745
3844
  description: 'This widget shows the number of risks within each risk appetite, the number of risks that exceed the risk appetite, the number of risks that exceed the risk tolerance, the number of risks within each risk rating, and the number of risks that do not have any linked controls.',
3746
3845
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
3747
3846
  value: false,
3847
+ visibility: true,
3748
3848
  module: 'RISK',
3749
3849
  subWidgets: [
3750
3850
  {
3751
3851
  title: 'Risk Appetite & Tolerance',
3752
3852
  id: 'risk_appetite_tolerance',
3753
3853
  value: false,
3854
+ visibility: true,
3754
3855
  },
3755
3856
  {
3756
3857
  title: 'Risk Ratings',
3757
3858
  id: 'risk_ratings',
3758
3859
  value: false,
3860
+ visibility: true,
3759
3861
  },
3760
3862
  {
3761
3863
  title: 'Risks Without Controls',
3762
3864
  id: 'risks_without_controls',
3763
3865
  value: false,
3866
+ visibility: true,
3764
3867
  },
3765
3868
  {
3766
3869
  title: 'Exceeds Risk Tolerance',
3767
3870
  id: 'exceeds_risk_tolerance',
3768
3871
  value: false,
3872
+ visibility: true,
3769
3873
  },
3770
3874
  ]
3771
3875
  },
@@ -3775,6 +3879,7 @@ class ConfigureWidgetsComponent {
3775
3879
  description: 'This widget shows the number of risks within each inherent risk rating, grouped according to the Responsibility Center exposed to the risk.',
3776
3880
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-RC.png',
3777
3881
  value: false,
3882
+ visibility: true,
3778
3883
  module: 'RISK',
3779
3884
  subWidgets: []
3780
3885
  },
@@ -3784,6 +3889,7 @@ class ConfigureWidgetsComponent {
3784
3889
  description: 'This widget shows the number of risks within each residual risk rating, grouped according to the Responsibility Center exposed to the risk.',
3785
3890
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-RC.png',
3786
3891
  value: false,
3892
+ visibility: true,
3787
3893
  module: 'RISK',
3788
3894
  subWidgets: []
3789
3895
  },
@@ -3793,6 +3899,7 @@ class ConfigureWidgetsComponent {
3793
3899
  description: 'This widgets shows the number of risks within each status, grouped according to the Risk Category the risk is assigned to.',
3794
3900
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-category-overview.png',
3795
3901
  value: false,
3902
+ visibility: true,
3796
3903
  module: 'RISK',
3797
3904
  subWidgets: []
3798
3905
  },
@@ -3802,6 +3909,7 @@ class ConfigureWidgetsComponent {
3802
3909
  description: 'The Risk Heatmap displays the risk matrix for any two risk factors.',
3803
3910
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-heatmap.png',
3804
3911
  value: false,
3912
+ visibility: true,
3805
3913
  module: 'RISK',
3806
3914
  subWidgets: []
3807
3915
  },
@@ -3811,6 +3919,7 @@ class ConfigureWidgetsComponent {
3811
3919
  description: 'This widget shows the number of risks within each inherent risk rating, grouped according to the Risk Category that the risk is assigned to.',
3812
3920
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-categories.png',
3813
3921
  value: false,
3922
+ visibility: true,
3814
3923
  module: 'RISK',
3815
3924
  subWidgets: []
3816
3925
  },
@@ -3820,6 +3929,7 @@ class ConfigureWidgetsComponent {
3820
3929
  description: 'This widget shows the number of risks within each residual risk rating, grouped according to the Risk Category that the risk is assigned to.',
3821
3930
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-categories.png',
3822
3931
  value: false,
3932
+ visibility: true,
3823
3933
  module: 'RISK',
3824
3934
  subWidgets: []
3825
3935
  },
@@ -3829,6 +3939,7 @@ class ConfigureWidgetsComponent {
3829
3939
  description: 'This widget is a graphical representation of the number of risks within each inherent risk rating, grouped according to the Responsibility Center exposed to the risk.',
3830
3940
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
3831
3941
  value: false,
3942
+ visibility: true,
3832
3943
  module: 'RISK',
3833
3944
  subWidgets: []
3834
3945
  },
@@ -3838,6 +3949,7 @@ class ConfigureWidgetsComponent {
3838
3949
  description: 'This widget is a graphical representation of the number of risks within each residual risk rating, grouped according to the Responsibility Center exposed to the risk.',
3839
3950
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
3840
3951
  value: false,
3952
+ visibility: true,
3841
3953
  module: 'RISK',
3842
3954
  subWidgets: []
3843
3955
  },
@@ -3847,6 +3959,7 @@ class ConfigureWidgetsComponent {
3847
3959
  description: 'This widgets is a trend chart that shows the inherent and residual risk rating trend across the different Risk Categories.',
3848
3960
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
3849
3961
  value: false,
3962
+ visibility: true,
3850
3963
  module: 'RISK',
3851
3964
  subWidgets: []
3852
3965
  },
@@ -3856,6 +3969,7 @@ class ConfigureWidgetsComponent {
3856
3969
  description: 'This widgets shows ths top five risks with the highest risk rating.',
3857
3970
  widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/5-risk-ratings.png',
3858
3971
  value: false,
3972
+ visibility: true,
3859
3973
  module: 'RISK',
3860
3974
  subWidgets: []
3861
3975
  }
@@ -3863,6 +3977,54 @@ class ConfigureWidgetsComponent {
3863
3977
  };
3864
3978
  }
3865
3979
  ngOnChanges() {
3980
+ if (this.mode == 'EDIT') {
3981
+ this.setWidgetsVisibilityToFalse();
3982
+ this.riskWidgetsDisplayCount = 0;
3983
+ this.complianceWidgetsDisplayCount = 0;
3984
+ const finalData = [...new Set(this.displayedWidgets)];
3985
+ finalData.forEach((element, index) => {
3986
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
3987
+ if (ele.id == element.widget_code) {
3988
+ ele.visibility = true;
3989
+ if (ele.subWidgets.length > 0) {
3990
+ const filterData = [];
3991
+ element.sub_widgets.filter((subwidget) => {
3992
+ filterData.push(subwidget.widget_code);
3993
+ });
3994
+ ele.subWidgets.forEach((subElement, subIndex) => {
3995
+ if (filterData.includes(subElement.id)) {
3996
+ ele.subWidgets[subIndex].visibility = true;
3997
+ }
3998
+ else {
3999
+ ele.subWidgets[subIndex].visibility = false;
4000
+ }
4001
+ });
4002
+ }
4003
+ this.complianceWidgetsDisplayCount++;
4004
+ }
4005
+ });
4006
+ this.widgetsList.RISK.forEach((ele) => {
4007
+ if (ele.id == element.widget_code) {
4008
+ ele.visibility = true;
4009
+ if (ele.subWidgets.length > 0) {
4010
+ const filterData = [];
4011
+ element.sub_widgets.filter((subwidget) => {
4012
+ filterData.push(subwidget.widget_code);
4013
+ });
4014
+ ele.subWidgets.forEach((subElement, subIndex) => {
4015
+ if (filterData.includes(subElement.id)) {
4016
+ ele.subWidgets[subIndex].visibility = true;
4017
+ }
4018
+ else {
4019
+ ele.subWidgets[subIndex].visibility = false;
4020
+ }
4021
+ });
4022
+ }
4023
+ this.riskWidgetsDisplayCount++;
4024
+ }
4025
+ });
4026
+ });
4027
+ }
3866
4028
  const data = [...new Set(this.selectedWidgetsData)];
3867
4029
  data.forEach((element, index) => {
3868
4030
  this.widgetsList.COMPLIANCE.forEach((ele) => {
@@ -3988,11 +4150,29 @@ class ConfigureWidgetsComponent {
3988
4150
  this.dialog.close();
3989
4151
  this.closeConfigureWidgets.emit(false);
3990
4152
  }
4153
+ setWidgetsVisibilityToFalse() {
4154
+ this.widgetsList.COMPLIANCE.forEach((ele) => {
4155
+ ele.visibility = false;
4156
+ if (ele.subWidgets.length > 0) {
4157
+ ele.subWidgets.forEach((subElement) => {
4158
+ subElement.visibility = false;
4159
+ });
4160
+ }
4161
+ });
4162
+ this.widgetsList.RISK.forEach((ele) => {
4163
+ ele.visibility = false;
4164
+ if (ele.subWidgets.length > 0) {
4165
+ ele.subWidgets.forEach((subElement) => {
4166
+ subElement.visibility = false;
4167
+ });
4168
+ }
4169
+ });
4170
+ }
3991
4171
  }
3992
4172
  ConfigureWidgetsComponent.decorators = [
3993
4173
  { type: Component, args: [{
3994
4174
  selector: 'app-configure-widgets',
3995
- template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\"><button>Compliance<span>{{widgetsList?.COMPLIANCE?.length}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button (click)=\"module='RISK'\">Risks<span>{{widgetsList?.RISK?.length}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <div class=\"configure-widgets-item\" *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" \r\n [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\"> \r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button class=\"configure-widgets-item-button add\" (click)=\"selectWidget(true,module,widget.id) \" >+ ADD</button>\r\n <button class=\"configure-widgets-item-button remove\" (click)=\"selectWidget(false,module,widget.id) \" >- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <app-cs-checkbox \r\n *ngFor=\"let subWidget of widget.subWidgets\" \r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\" \r\n [ngValue]=\"subWidget.value\"\r\n >{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </div>\r\n \r\n </div>\r\n </label>\r\n </div>\r\n <!-- No Data Image -->\r\n \r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n \r\n <floating-bar \r\n (submitEvent)=\"onNextClick()\" \r\n (cancelEvent)=\"closeConfigureDashboard()\" \r\n [selectedData]=\"selectedWidgets\"\r\n (deleteEvent)=\"removeWidget($event)\"\r\n ></floating-bar>\r\n</div>",
4175
+ template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head\">\r\n <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons\">&#xe91d;</i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </div>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>",
3996
4176
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#fff}::ng-deep .configure-widgets-head{height:44px;background:#fbfbfb;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:#0000;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:#0000;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:#0000;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}"]
3997
4177
  },] }
3998
4178
  ];
@@ -4005,8 +4185,10 @@ ConfigureWidgetsComponent.propDecorators = {
4005
4185
  widgetsDataModified: [{ type: Output }],
4006
4186
  closeConfigureWidgets: [{ type: Output }],
4007
4187
  selectedWidgetsData: [{ type: Input }],
4188
+ displayedWidgets: [{ type: Input }],
4008
4189
  showRisk: [{ type: Input }],
4009
- showCompliance: [{ type: Input }]
4190
+ showCompliance: [{ type: Input }],
4191
+ mode: [{ type: Input }]
4010
4192
  };
4011
4193
 
4012
4194
  class ScrollInViewDirective {