vc-create-dashboard 2.8.2 → 2.8.4

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 (10) hide show
  1. package/esm2020/lib/create-dashboard-container/categories/categories.component.mjs +2 -2
  2. package/esm2020/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +41 -41
  3. package/esm2020/lib/create-dashboard-container/create-dashboard.component.mjs +3 -3
  4. package/esm2020/lib/create-dashboard-container/services/create-dashboard.service.mjs +2 -2
  5. package/esm2020/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.mjs +3 -3
  6. package/fesm2015/create-dashboard.mjs +47 -47
  7. package/fesm2015/create-dashboard.mjs.map +1 -1
  8. package/fesm2020/create-dashboard.mjs +47 -47
  9. package/fesm2020/create-dashboard.mjs.map +1 -1
  10. package/package.json +2 -2
package/fesm2015/create-dashboard.mjs CHANGED
@@ -157,7 +157,7 @@ class CreateDashboardService {
157
157
  getComplianceCategoriesListFromGlobal() {
158
158
  var _a;
159
159
  const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
160
- return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryListTree&program=1&isDashboard=true', {
160
+ return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryListTree&program=1', {
161
161
  headers,
162
162
  }).pipe(retry(2));
163
163
  }
@@ -1032,7 +1032,7 @@ class ConfigureWidgetsComponent {
1032
1032
  this.subKeyResponsibilitiesSelected = false;
1033
1033
  this.showWidgets = true;
1034
1034
  this.complianceWidgetsDisplayCount = 9;
1035
- this.riskWidgetsDisplayCount = 12;
1035
+ this.riskWidgetsDisplayCount = 9;
1036
1036
  this.widgetsList = {
1037
1037
  COMPLIANCE: [
1038
1038
  {
@@ -1210,12 +1210,12 @@ class ConfigureWidgetsComponent {
1210
1210
  value: false,
1211
1211
  visibility: true,
1212
1212
  },
1213
- {
1214
- title: 'Exceeds Risk Tolerance',
1215
- id: 'exceeds_risk_tolerance',
1216
- value: false,
1217
- visibility: true,
1218
- },
1213
+ // {
1214
+ // title: 'Exceeds Risk Tolerance',
1215
+ // id: 'exceeds_risk_tolerance',
1216
+ // value: false,
1217
+ // visibility:true,
1218
+ // },
1219
1219
  ]
1220
1220
  },
1221
1221
  {
@@ -1278,41 +1278,41 @@ class ConfigureWidgetsComponent {
1278
1278
  module: 'RISK',
1279
1279
  subWidgets: []
1280
1280
  },
1281
+ // {
1282
+ // title: 'Inherent Risk Rating Trend by Responsibility Centers',
1283
+ // id: 'inherent_risk_rating_trend_by_responsibility_centers',
1284
+ // 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.',
1285
+ // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
1286
+ // value: false,
1287
+ // visibility:true,
1288
+ // module: 'RISK',
1289
+ // subWidgets: []
1290
+ // },
1291
+ // {
1292
+ // title: 'Residual Risk Rating Trend by Responsibility Centers',
1293
+ // id: 'residual_risk_rating_trend_by_responsibility_centers',
1294
+ // 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.',
1295
+ // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
1296
+ // value: false,
1297
+ // visibility:true,
1298
+ // module: 'RISK',
1299
+ // subWidgets: []
1300
+ // },
1301
+ // {
1302
+ // title: 'Risk Rating Trend by Categories',
1303
+ // id: 'risk_rating_trend_by_categories',
1304
+ // description: 'This widgets is a trend chart that shows the inherent and residual risk rating trend across the different Risk Categories.',
1305
+ // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
1306
+ // value: false,
1307
+ // visibility:true,
1308
+ // module: 'RISK',
1309
+ // subWidgets: []
1310
+ // },
1281
1311
  {
1282
- title: 'Inherent Risk Rating Trend by Responsibility Centers',
1283
- id: 'inherent_risk_rating_trend_by_responsibility_centers',
1284
- 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.',
1285
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
1286
- value: false,
1287
- visibility: true,
1288
- module: 'RISK',
1289
- subWidgets: []
1290
- },
1291
- {
1292
- title: 'Residual Risk Rating Trend by Responsibility Centers',
1293
- id: 'residual_risk_rating_trend_by_responsibility_centers',
1294
- 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.',
1295
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
1296
- value: false,
1297
- visibility: true,
1298
- module: 'RISK',
1299
- subWidgets: []
1300
- },
1301
- {
1302
- title: 'Risk Rating Trend by Categories',
1303
- id: 'risk_rating_trend_by_categories',
1304
- description: 'This widgets is a trend chart that shows the inherent and residual risk rating trend across the different Risk Categories.',
1305
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
1306
- value: false,
1307
- visibility: true,
1308
- module: 'RISK',
1309
- subWidgets: []
1310
- },
1311
- {
1312
- title: 'Top 5 Risk Ratings',
1313
- id: 'top_5_residual_risk_ratings',
1312
+ title: 'Top 10 Risk Ratings',
1313
+ id: 'top_10_residual_risk_ratings',
1314
1314
  description: 'This widgets shows ths top five risks with the highest risk rating.',
1315
- widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/5-risk-ratings.png',
1315
+ widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/10-risk-ratings.png',
1316
1316
  value: false,
1317
1317
  visibility: true,
1318
1318
  module: 'RISK',
@@ -1693,10 +1693,10 @@ class DashboardFooterComponent {
1693
1693
  }
1694
1694
  }
1695
1695
  DashboardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1696
- DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] });
1696
+ DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] });
1697
1697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashboardFooterComponent, decorators: [{
1698
1698
  type: Component,
1699
- args: [{ selector: 'app-dashboard-footer', template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"] }]
1699
+ args: [{ selector: 'app-dashboard-footer', template: "<div class=\"floating-bar-container\">\r\n <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <span\r\n class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n </span>\r\n <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n 1}}</span>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n {{footerDetails.singularText}}</span>\r\n <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n {{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"chip-item\">\r\n <i class=\"icons\"\r\n *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span>{{element[footerDetails.displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";.floating-bar{width:100%;background:#FFFFFF;box-shadow:0 2px 6px #4681ef20;border-radius:2px;position:relative}.floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}\n"] }]
1700
1700
  }], ctorParameters: function () { return []; }, propDecorators: { cancelEvent: [{
1701
1701
  type: Output
1702
1702
  }], submitEvent: [{
@@ -2544,10 +2544,10 @@ class CategoriesComponent {
2544
2544
  }
2545
2545
  }
2546
2546
  CategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2547
- CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .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 .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2547
+ CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .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 .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
2548
2548
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, decorators: [{
2549
2549
  type: Component,
2550
- args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .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 .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
2550
+ args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <!-- <div class=\"category-list-tab\">\r\n <ul>\r\n <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n <li><button>Risks<span>120</span></button></li>\r\n <li><button>Audit<span>28</span></button></li>\r\n <li><button>Policy<span>45</span></button></li>\r\n </ul>\r\n </div> -->\r\n \r\n <div class=\"vx-d-flex vx-mb-2\">\r\n \r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"search\">\r\n <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n {{entity}}\r\n </li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .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 .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
2551
2551
  }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
2552
2552
  type: Input
2553
2553
  }], allCategories: [{
@@ -3937,10 +3937,10 @@ class CreateDashboardComponent {
3937
3937
  }
3938
3938
  }
3939
3939
  CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
3940
- CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, 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\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_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 <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\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\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .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:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{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:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;inset:0;background:#FFFFFF;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:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right: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:#FFFFFF;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:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "marx-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
3940
+ CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, 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\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_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 <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\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\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .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:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{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:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;inset:0;background:#FFFFFF;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:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right: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:#FFFFFF;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:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "marx-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
3941
3941
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, decorators: [{
3942
3942
  type: Component,
3943
- args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], 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\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_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 <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\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\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .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:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{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:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;inset:0;background:#FFFFFF;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:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right: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:#FFFFFF;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:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
3943
+ args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], 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\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n </app-responsibility-center>\r\n <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n </app-frequency>\r\n </div>\r\n <div class=\"vx-dialog-container side-dialog\">\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/what.svg\"\r\n *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\">\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <marx-editor [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n <span class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n You have exceeded the maximum character limit of 250 characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n alt=\"\">\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n (click)=\"activateSelector('whoCanView', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n </div>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n <div class=\"chip-inner\">\r\n <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n {{data.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n {{data.group_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 <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div> \r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n </div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n placement=\"right\">+\r\n {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\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\" *ngIf=\"isManageRisk\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5 \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n <div class=\"left\">\r\n <div class=\"chip-container vx-d-flex vx-align-center\">\r\n <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n </div>\r\n <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n\r\n </div>\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\"\r\n (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n selected to be displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label>\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\"\r\n [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n </div>\r\n </div>\r\n </div>\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n Email Summaries </label>\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard,\r\n please select a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n (click)=\"activateSelector('frequency', true)\">\r\n </div>\r\n <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n </div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n Configure\r\n Widgets</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n <i class=\"icons\">&#xe93f;</i>\r\n </button>\r\n <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\">&#xe930;</i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n </div>\r\n <div class=\"global-confirmation-alert-bottom\">\r\n <p class=\"message\"></p>\r\n <div class=\"button-group\">\r\n <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n *ngIf=\"isSmiley\"\r\n [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .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:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{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:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);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;inset:0;background:#FFFFFF;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:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right: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:#FFFFFF;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:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
3944
3944
  }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
3945
3945
  type: Input
3946
3946
  }], mode: [{