vc-create-dashboard 3.0.1 → 3.0.3
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.
- package/esm2022/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +3 -3
- package/esm2022/lib/create-dashboard-container/configure-widgets/configure-widgets.module.mjs +6 -4
- package/esm2022/lib/create-dashboard-container/constants/assets.constant.mjs +10 -0
- package/esm2022/lib/create-dashboard-container/create-dashboard.component.mjs +22 -10
- package/esm2022/lib/create-dashboard-container/create-dashboard.module.mjs +16 -5
- package/esm2022/lib/create-dashboard-container/form-group/form-group.component.mjs +6 -5
- package/esm2022/lib/create-dashboard-container/services/urlConfig.service.mjs +29 -0
- package/esm2022/lib/ui-kit/no-data/no-data.component.mjs +2 -2
- package/esm2022/lib/ui-kit/select/cs-select/cs-select.component.mjs +4 -2
- package/esm2022/lib/ui-kit/tooltip/tooltip.directive.mjs +11 -4
- package/esm2022/lib/ui-kit/v-loader/loader/loader.component.mjs +4 -3
- package/esm2022/lib/ui-kit/v-loader/loader-inline/loader-inline.component.mjs +4 -3
- package/esm2022/lib/ui-kit/v-loader/v-loader.module.mjs +4 -4
- package/fesm2022/vc-create-dashboard.mjs +99 -32
- package/fesm2022/vc-create-dashboard.mjs.map +1 -1
- package/lib/create-dashboard-container/configure-widgets/configure-widgets.module.d.ts +1 -1
- package/lib/create-dashboard-container/constants/assets.constant.d.ts +9 -0
- package/lib/create-dashboard-container/create-dashboard.component.d.ts +1 -0
- package/lib/create-dashboard-container/create-dashboard.module.d.ts +5 -1
- package/lib/create-dashboard-container/form-group/form-group.component.d.ts +1 -0
- package/lib/create-dashboard-container/services/urlConfig.service.d.ts +10 -0
- package/lib/ui-kit/tooltip/tooltip.directive.d.ts +3 -2
- package/lib/ui-kit/v-loader/v-loader.module.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
|
|
3
|
-
import
|
|
3
|
+
import dayjs from 'dayjs';
|
|
4
|
+
import * as LocalizedFormat from 'dayjs/plugin/localizedFormat';
|
|
4
5
|
import * as i1 from '@angular/common/http';
|
|
5
6
|
import { HttpHeaders, HttpParams } from '@angular/common/http';
|
|
6
7
|
import { JwtHelperService } from '@auth0/angular-jwt';
|
|
7
8
|
import { of, BehaviorSubject, Subject } from 'rxjs';
|
|
8
9
|
import { map, retry, catchError } from 'rxjs/operators';
|
|
9
10
|
import * as i1$1 from '@angular/common';
|
|
10
|
-
import { CommonModule } from '@angular/common';
|
|
11
|
+
import { CommonModule, NgOptimizedImage } from '@angular/common';
|
|
11
12
|
import * as i8 from '@vcomply/editor';
|
|
12
13
|
import { VcomplyEditorModule } from '@vcomply/editor';
|
|
13
14
|
import * as i5 from '@angular/forms';
|
|
@@ -48,6 +49,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
48
49
|
}]
|
|
49
50
|
}] });
|
|
50
51
|
|
|
52
|
+
const ASSETS = {
|
|
53
|
+
dashBoardIcon: `/libraries/workflow-engine/assets/workflow/what.svg`,
|
|
54
|
+
dashBoardUsersIcon: `/libraries/workflow-engine/assets/workflow/who.svg`,
|
|
55
|
+
dashBoardRcIcon: `/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
|
|
56
|
+
dashBoardProgramIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
|
|
57
|
+
dashBoardRiskIcon: `/libraries/workflow-engine/assets/workflow/category.svg`,
|
|
58
|
+
dashBoardTimeFrameIcon: `/libraries/workflow-engine/assets/workflow/when.svg`,
|
|
59
|
+
dashBoardEmailSummariesIcon: `/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
|
|
60
|
+
};
|
|
61
|
+
|
|
51
62
|
class Configurations {
|
|
52
63
|
envConfig;
|
|
53
64
|
constructor() {
|
|
@@ -584,6 +595,9 @@ class ToolTipDirective {
|
|
|
584
595
|
onClick() {
|
|
585
596
|
this.hide();
|
|
586
597
|
}
|
|
598
|
+
ngOnDestroy() {
|
|
599
|
+
this.hide();
|
|
600
|
+
}
|
|
587
601
|
show() {
|
|
588
602
|
if (!this.showTooltip) {
|
|
589
603
|
return;
|
|
@@ -595,7 +609,8 @@ class ToolTipDirective {
|
|
|
595
609
|
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
|
|
596
610
|
}
|
|
597
611
|
else {
|
|
598
|
-
if (element.scrollWidth * element.scrollHeight >
|
|
612
|
+
if (element.scrollWidth * element.scrollHeight >
|
|
613
|
+
element.offsetWidth * element.offsetHeight) {
|
|
599
614
|
this.setPosition();
|
|
600
615
|
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
|
|
601
616
|
}
|
|
@@ -623,7 +638,10 @@ class ToolTipDirective {
|
|
|
623
638
|
setPosition() {
|
|
624
639
|
const hostPos = this.el.nativeElement.getBoundingClientRect();
|
|
625
640
|
const tooltipPos = this.tooltip.getBoundingClientRect();
|
|
626
|
-
const scrollPos = window.pageYOffset ||
|
|
641
|
+
const scrollPos = window.pageYOffset ||
|
|
642
|
+
document.documentElement.scrollTop ||
|
|
643
|
+
document.body.scrollTop ||
|
|
644
|
+
0;
|
|
627
645
|
const w = window.innerWidth;
|
|
628
646
|
const h = window.innerHeight;
|
|
629
647
|
let top;
|
|
@@ -1041,11 +1059,11 @@ class NoDataComponent {
|
|
|
1041
1059
|
this.buttonAction.emit(button);
|
|
1042
1060
|
}
|
|
1043
1061
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1044
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoDataComponent, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:
|
|
1062
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoDataComponent, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:24px;margin-bottom:25px;color:#787a8c;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\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"] }] });
|
|
1045
1063
|
}
|
|
1046
1064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoDataComponent, decorators: [{
|
|
1047
1065
|
type: Component,
|
|
1048
|
-
args: [{ selector: 'app-no-data', template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:
|
|
1066
|
+
args: [{ selector: 'app-no-data', template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:250px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:13px;font-weight:400;line-height:24px;margin-bottom:25px;color:#787a8c;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
|
|
1049
1067
|
}], ctorParameters: function () { return []; }, propDecorators: { action: [{
|
|
1050
1068
|
type: Input
|
|
1051
1069
|
}], noDataImage: [{
|
|
@@ -1608,11 +1626,11 @@ class ConfigureWidgetsComponent {
|
|
|
1608
1626
|
});
|
|
1609
1627
|
}
|
|
1610
1628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1611
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
|
|
1629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div\r\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\r\n Configure Widgets\r\n </div>\r\n <button\r\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\r\n (click)=\"closeConfigureDashboard()\"\r\n >\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li\r\n [class.active]=\"module === 'COMPLIANCE'\"\r\n *ngIf=\"showCompliance\"\r\n (click)=\"module = 'COMPLIANCE'\"\r\n >\r\n <button>\r\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\r\n </button>\r\n </li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\r\n <button (click)=\"module = 'RISK'\">\r\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\r\n </div>\r\n <div\r\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\r\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\r\n >\r\n <ng-container\r\n *ngFor=\"let widget of widgetsList[module] | search : search\"\r\n >\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\r\n />\r\n <div class=\"check-icon\">\r\n <svg\r\n class=\"check\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"check-circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"check-circle\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4\r\n class=\"configure-widgets-item-title\"\r\n [innerHTML]=\"widget?.title\"\r\n ></h4>\r\n <p\r\n class=\"configure-widgets-item-description\"\r\n [innerHTML]=\"widget?.description\"\r\n ></p>\r\n <button\r\n *ngIf=\"!widget.value\"\r\n class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true, module, widget.id)\"\r\n >\r\n + ADD\r\n </button>\r\n <button\r\n *ngIf=\"widget.value\"\r\n class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false, module, widget.id)\"\r\n >\r\n - Remove\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img\r\n [ngSrc]=\"widget?.widgetImage\"\r\n alt=\"\"\r\n width=\"790\"\r\n height=\"613\"\r\n />\r\n </div>\r\n <div\r\n class=\"floating-option vx-d-flex\"\r\n *ngIf=\"widget?.subWidgets?.length > 0\"\r\n >\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox\r\n *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"\r\n selectWidget($event, module, widget.id, subWidget.id)\r\n \"\r\n [ngValue]=\"subWidget.value\"\r\n >{{ subWidget.title }}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n </div>\r\n <app-no-data\r\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\r\n [noDataImage]=\"\r\n 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\r\n \"\r\n [noDataText]=\"'No data to display'\"\r\n >\r\n </app-no-data>\r\n\r\n <floating-bar\r\n (submitEvent)=\"onNextClick()\"\r\n (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\"\r\n (deleteEvent)=\"removeWidget($event)\"\r\n ></floating-bar>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FloatingBarComponent, selector: "floating-bar", inputs: ["text", "frequencyMessage", "singleCategory", "selectedData"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
|
|
1612
1630
|
}
|
|
1613
1631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
|
|
1614
1632
|
type: Component,
|
|
1615
|
-
args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
|
|
1633
|
+
args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div\r\n class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">\r\n Configure Widgets\r\n </div>\r\n <button\r\n class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\"\r\n (click)=\"closeConfigureDashboard()\"\r\n >\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li\r\n [class.active]=\"module === 'COMPLIANCE'\"\r\n *ngIf=\"showCompliance\"\r\n (click)=\"module = 'COMPLIANCE'\"\r\n >\r\n <button>\r\n Compliance<span>{{ complianceWidgetsDisplayCount }}</span>\r\n </button>\r\n </li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\">\r\n <button (click)=\"module = 'RISK'\">\r\n Risks<span>{{ riskWidgetsDisplayCount }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\" />\r\n </div>\r\n <div\r\n class=\"configure-widgets-list vx-d-flex vx-flex-wrap\"\r\n *ngIf=\"(widgetsList[module] | search : search).length !== 0\"\r\n >\r\n <ng-container\r\n *ngFor=\"let widget of widgetsList[module] | search : search\"\r\n >\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked, module, widget.id)\"\r\n />\r\n <div class=\"check-icon\">\r\n <svg\r\n class=\"check\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"check-circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"check-circle\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4\r\n class=\"configure-widgets-item-title\"\r\n [innerHTML]=\"widget?.title\"\r\n ></h4>\r\n <p\r\n class=\"configure-widgets-item-description\"\r\n [innerHTML]=\"widget?.description\"\r\n ></p>\r\n <button\r\n *ngIf=\"!widget.value\"\r\n class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true, module, widget.id)\"\r\n >\r\n + ADD\r\n </button>\r\n <button\r\n *ngIf=\"widget.value\"\r\n class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false, module, widget.id)\"\r\n >\r\n - Remove\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img\r\n [ngSrc]=\"widget?.widgetImage\"\r\n alt=\"\"\r\n width=\"790\"\r\n height=\"613\"\r\n />\r\n </div>\r\n <div\r\n class=\"floating-option vx-d-flex\"\r\n *ngIf=\"widget?.subWidgets?.length > 0\"\r\n >\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox\r\n *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"\r\n selectWidget($event, module, widget.id, subWidget.id)\r\n \"\r\n [ngValue]=\"subWidget.value\"\r\n >{{ subWidget.title }}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n </div>\r\n <app-no-data\r\n *ngIf=\"(widgetsList[module] | search : search).length === 0\"\r\n [noDataImage]=\"\r\n 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\r\n \"\r\n [noDataText]=\"'No data to display'\"\r\n >\r\n </app-no-data>\r\n\r\n <floating-bar\r\n (submitEvent)=\"onNextClick()\"\r\n (cancelEvent)=\"closeConfigureDashboard()\"\r\n [selectedData]=\"selectedWidgets\"\r\n (deleteEvent)=\"removeWidget($event)\"\r\n ></floating-bar>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:100vw;height:100vh;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#fbfbfb;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}\n"] }]
|
|
1616
1634
|
}], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
|
|
1617
1635
|
type: Output
|
|
1618
1636
|
}], closeConfigureWidgets: [{
|
|
@@ -1640,11 +1658,11 @@ class LoaderInlineComponent {
|
|
|
1640
1658
|
}
|
|
1641
1659
|
ngOnInit() { }
|
|
1642
1660
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1643
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n <img
|
|
1661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\r\n <div class=\"loader-index\">\r\n <div class=\"loader-index-circle\"></div>\r\n </div>\r\n</div>\r\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }] });
|
|
1644
1662
|
}
|
|
1645
1663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderInlineComponent, decorators: [{
|
|
1646
1664
|
type: Component,
|
|
1647
|
-
args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n <img
|
|
1665
|
+
args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\r\n <div class=\"loader-index\">\r\n <div class=\"loader-index-circle\"></div>\r\n </div>\r\n</div>\r\n", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1648
1666
|
}], ctorParameters: function () { return [{ type: Configurations, decorators: [{
|
|
1649
1667
|
type: Optional
|
|
1650
1668
|
}] }]; } });
|
|
@@ -3204,7 +3222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3204
3222
|
type: Output
|
|
3205
3223
|
}] } });
|
|
3206
3224
|
|
|
3207
|
-
|
|
3225
|
+
dayjs.extend(LocalizedFormat);
|
|
3208
3226
|
class CreateDashboardComponent {
|
|
3209
3227
|
createDashboardService;
|
|
3210
3228
|
paginationService;
|
|
@@ -3224,6 +3242,7 @@ class CreateDashboardComponent {
|
|
|
3224
3242
|
toDatePicker;
|
|
3225
3243
|
animation = true;
|
|
3226
3244
|
configureWidget = false;
|
|
3245
|
+
ASSETS = ASSETS;
|
|
3227
3246
|
totalPages = 1;
|
|
3228
3247
|
totalList = 1;
|
|
3229
3248
|
usersList = [];
|
|
@@ -4225,34 +4244,43 @@ class CreateDashboardComponent {
|
|
|
4225
4244
|
});
|
|
4226
4245
|
}
|
|
4227
4246
|
documentClick(event) {
|
|
4247
|
+
const targetElement = event?.target;
|
|
4228
4248
|
const fromDateInputElement = document.getElementById(this.openedDatePicker.toLowerCase()) || null;
|
|
4229
4249
|
const datePickerCalendarContainer = document.getElementsByClassName('dp-day-calendar-container')[0];
|
|
4250
|
+
const monthYearElement = document.querySelector('.dp-month-calendar-container');
|
|
4251
|
+
const isNotMonthYearElement = !monthYearElement?.contains(targetElement);
|
|
4230
4252
|
const openedElement = this.openedDatePicker === 'FROM_DATE'
|
|
4231
4253
|
? this.fromDatePickerPopup
|
|
4232
4254
|
: this.toDatePickerPopup;
|
|
4233
|
-
const isOutsideFromDateInput = !openedElement
|
|
4234
|
-
const isNotFromDateElement = event
|
|
4235
|
-
const isNotInsideCalendar = !datePickerCalendarContainer
|
|
4255
|
+
const isOutsideFromDateInput = !openedElement?.nativeElement?.contains(targetElement);
|
|
4256
|
+
const isNotFromDateElement = event?.target !== fromDateInputElement;
|
|
4257
|
+
const isNotInsideCalendar = !datePickerCalendarContainer?.contains(targetElement);
|
|
4236
4258
|
const selectedDatePicker = this.openedDatePicker === 'FROM_DATE'
|
|
4237
4259
|
? this.fromDatePicker
|
|
4238
4260
|
: this.toDatePicker;
|
|
4239
|
-
|
|
4261
|
+
const isNotCalendarMonth = !targetElement.className.includes('dp-calendar-month');
|
|
4262
|
+
if (isOutsideFromDateInput &&
|
|
4263
|
+
isNotFromDateElement &&
|
|
4264
|
+
isNotInsideCalendar &&
|
|
4265
|
+
isNotCalendarMonth &&
|
|
4266
|
+
isNotMonthYearElement &&
|
|
4267
|
+
datePickerCalendarContainer) {
|
|
4240
4268
|
this.documentClickListener(event.target, openedElement, selectedDatePicker);
|
|
4241
4269
|
}
|
|
4242
4270
|
}
|
|
4243
4271
|
documentClickListener(target, openedElements, selectedDatePicker) {
|
|
4244
|
-
if (!openedElements
|
|
4272
|
+
if (!openedElements?.nativeElement?.contains(target) &&
|
|
4245
4273
|
selectedDatePicker?.areCalendarsShown) {
|
|
4246
4274
|
selectedDatePicker?.api?.close();
|
|
4247
4275
|
this.datePickerOverlay = false;
|
|
4248
4276
|
}
|
|
4249
4277
|
}
|
|
4250
4278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
4251
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div\r\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n [class.animate-slideInRight]=\"animation\"\r\n >\r\n <div\r\n class=\"more-option\"\r\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-user-list\r\n *ngIf=\"activeSelector === 'whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n (closeUserList)=\"activateSelector('', false)\"\r\n [totalPages]=\"totalPages\"\r\n [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"\r\n [totalgroupscount]=\"totalgroups\"\r\n [feature]=\"feature\"\r\n ></app-user-list>\r\n <app-responsibility-center\r\n *ngIf=\"activeSelector === 'rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"\r\n dashboardForm.selectedResponsibilityCenters\r\n \"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"activateSelector('', false)\"\r\n >\r\n </app-responsibility-center>\r\n <app-categories\r\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\"\r\n [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"\r\n saveSelectedList('responsibilityCategories', $event)\r\n \"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-categories>\r\n <app-risk-categories\r\n *ngIf=\"activeSelector === 'riskCategories'\"\r\n [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-risk-categories>\r\n\r\n <app-frequency\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\"\r\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\"\r\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n >\r\n </app-frequency>\r\n </div>\r\n <div\r\n class=\"vx-dialog-container side-dialog\"\r\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div\r\n class=\"vx-dialog-body-container\"\r\n (scroll)=\"animateImage()\"\r\n [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n >\r\n <!-- Dashboard Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n *ngIf=\"\r\n !dashboardForm.dashboardName || activeSelector === 'name'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Dashboard Name\r\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n class=\"textField\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n />\r\n\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardName?.length > 30 ||\r\n !dashboardForm?.dashboardName)\r\n \"\r\n >\r\n {{\r\n dashboardForm.dashboardName.length > 30\r\n ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n : \"Please enter a name for this Dashboard.\"\r\n }}\r\n </p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n >{{\r\n 250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)\r\n }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n \"\r\n >\r\n You have exceeded the maximum character limit of 250\r\n characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'whoCanView' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length == 0 ||\r\n activeSelector === 'whoCanView'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 0 &&\r\n activeSelector !== 'whoCanView'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Who can view this dashboard?<span\r\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Who can view this dashboard?\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"user.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ user.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 1 &&\r\n !groupsEnabled\r\n \"\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n </button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"user?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n ) && !groupsEnabled\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\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 </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER(S)</span\r\n >\r\n <button\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userCount.popover()\"\r\n placement=\"left\"\r\n >\r\n {{ dashboardForm?.selectedViewers?.length }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n dashboardForm?.selectedGroup?.length &&\r\n dashboardForm?.selectedViewers?.length\r\n \"\r\n >&</span\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n id=\"usersandgroups\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER GROUP(S)</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"groupCount.popover()\"\r\n placement=\"right\"\r\n >\r\n {{ dashboardForm?.selectedGroup?.length }}\r\n </button>\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\r\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"data.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n data.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', data)\"\r\n ></i\r\n >\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\r\n class=\"value\"\r\n [arTooltip]=\"data.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('whoCanViewGroup', data)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'whoCanView'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rcList' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n activeSelector === 'rcList'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n activeSelector !== 'rcList'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RESPONSIBILITY CENTER(S)</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Responsibility Center(s) that you would like<br />displayed\r\n in the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rc.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rc.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rcList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n .length\r\n }}\r\n </button>\r\n\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=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rc?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'rcList'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'responsibilityCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 || activeSelector === 'responsibilityCategories'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n activeSelector !== 'responsibilityCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >PROGRAM</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Program(s) that you would like displayed in\r\n the<br />Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('responsibilityCategories', rCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rCategory.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rCategory.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories\r\n ?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rCategoryList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 1\r\n ).length\r\n }}\r\n </button>\r\n\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=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rCategory?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"\r\n remove(\r\n 'responsibilityCategories',\r\n rCategory\r\n )\r\n \"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'riskCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n activeSelector === 'riskCategories'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n activeSelector !== 'riskCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RISK CATEGORIES</label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Risk Categories that you would like displayed<br />in\r\n the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"riskCategory.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskCategory.category_name }}</span\r\n >\r\n <button\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"riskList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedRiskCategories?.slice(1).length\r\n }}\r\n </button>\r\n\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=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"riskCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'riskCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >DISPLAY CRITERIA</label\r\n >\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n >\r\n Those Items that have been assigned to either the selected\r\n Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n >\r\n Those Items that have been assigned to both the selected\r\n Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n !dashboardForm?.selectedFromDate ||\r\n !dashboardForm?.selectedToDate\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedFromDate &&\r\n dashboardForm?.selectedToDate\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >TIMEFRAME</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information\r\n will be displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"from_date\"\r\n [value]=\"\r\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeFromDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div\r\n class=\"date-select\"\r\n *ngIf=\"!hideToDate\"\r\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n >\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"to_date\"\r\n [value]=\"\r\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeToDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm.selectedFromDate &&\r\n !dashboardForm.selectedToDate\r\n \"\r\n >\r\n Select a time-frame.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Email Summaries</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >If you would like to send a summary of this Dashboard, please\r\n select a frequency(By default VComply sends a weekly\r\n Summary).</label\r\n >\r\n <div\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Email Summaries\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n ></div>\r\n\r\n <button\r\n *ngIf=\"\r\n dashboardForm.frequencyMessage &&\r\n activeSelector !== 'frequency'\r\n \"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <button\r\n class=\"close-dialog\"\r\n type=\"button\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"close.emit({ mode: 'discard' })\"\r\n [arTooltip]=\"'[Esc] to close'\"\r\n placement=\"left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div\r\n class=\"global-confirmation-alert\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n Select a Responsibility Center, Program or Risk Category.\r\n </p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n Select a Responsibility Center or Program.\r\n </p>\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\">\r\n OKAY\r\n </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\r\n *ngIf=\"openConfigureWidgets\"\r\n [mode]=\"mode\"\r\n [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\"\r\n [showCompliance]=\"showComplianceWidgets\"\r\n [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "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" }] });
|
|
4279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n <div\r\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n [class.animate-slideInRight]=\"animation\"\r\n >\r\n <div\r\n class=\"more-option\"\r\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-user-list\r\n *ngIf=\"activeSelector === 'whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n (closeUserList)=\"activateSelector('', false)\"\r\n [totalPages]=\"totalPages\"\r\n [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"\r\n [totalgroupscount]=\"totalgroups\"\r\n [feature]=\"feature\"\r\n ></app-user-list>\r\n <app-responsibility-center\r\n *ngIf=\"activeSelector === 'rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"\r\n dashboardForm.selectedResponsibilityCenters\r\n \"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"activateSelector('', false)\"\r\n >\r\n </app-responsibility-center>\r\n <app-categories\r\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\"\r\n [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"\r\n saveSelectedList('responsibilityCategories', $event)\r\n \"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-categories>\r\n <app-risk-categories\r\n *ngIf=\"activeSelector === 'riskCategories'\"\r\n [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-risk-categories>\r\n\r\n <app-frequency\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\"\r\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\"\r\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n >\r\n </app-frequency>\r\n </div>\r\n <div\r\n class=\"vx-dialog-container side-dialog\"\r\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div\r\n class=\"vx-dialog-body-container\"\r\n (scroll)=\"animateImage()\"\r\n [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n >\r\n <!-- Dashboard Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardIcon\"\r\n *ngIf=\"\r\n !dashboardForm.dashboardName || activeSelector === 'name'\r\n \"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Dashboard Name\r\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n class=\"textField\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n />\r\n\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardName?.length > 30 ||\r\n !dashboardForm?.dashboardName)\r\n \"\r\n >\r\n {{\r\n dashboardForm.dashboardName.length > 30\r\n ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n : \"Please enter a name for this Dashboard.\"\r\n }}\r\n </p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n >{{\r\n 250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)\r\n }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n \"\r\n >\r\n You have exceeded the maximum character limit of 250\r\n characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'whoCanView' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length == 0 ||\r\n activeSelector === 'whoCanView'\r\n \"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 0 &&\r\n activeSelector !== 'whoCanView'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Who can view this dashboard?<span\r\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Who can view this dashboard?\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"user.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ user.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 1 &&\r\n !groupsEnabled\r\n \"\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n </button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"user?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n ) && !groupsEnabled\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\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 </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER(S)</span\r\n >\r\n <button\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userCount.popover()\"\r\n placement=\"left\"\r\n >\r\n {{ dashboardForm?.selectedViewers?.length }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n dashboardForm?.selectedGroup?.length &&\r\n dashboardForm?.selectedViewers?.length\r\n \"\r\n >&</span\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n id=\"usersandgroups\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER GROUP(S)</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"groupCount.popover()\"\r\n placement=\"right\"\r\n >\r\n {{ dashboardForm?.selectedGroup?.length }}\r\n </button>\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\r\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"data.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n data.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', data)\"\r\n ></i\r\n >\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\r\n class=\"value\"\r\n [arTooltip]=\"data.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('whoCanViewGroup', data)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'whoCanView'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rcList' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n activeSelector === 'rcList'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n activeSelector !== 'rcList'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RESPONSIBILITY CENTER(S)</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Responsibility Center(s) that you would like<br />displayed\r\n in the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rc.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rc.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rcList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n .length\r\n }}\r\n </button>\r\n\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=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rc?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'rcList'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'responsibilityCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 || activeSelector === 'responsibilityCategories'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n activeSelector !== 'responsibilityCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >PROGRAM</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Program(s) that you would like displayed in\r\n the<br />Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('responsibilityCategories', rCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rCategory.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rCategory.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories\r\n ?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rCategoryList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 1\r\n ).length\r\n }}\r\n </button>\r\n\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=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rCategory?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"\r\n remove(\r\n 'responsibilityCategories',\r\n rCategory\r\n )\r\n \"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'riskCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n activeSelector === 'riskCategories'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n activeSelector !== 'riskCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RISK CATEGORIES</label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Risk Categories that you would like displayed<br />in\r\n the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"riskCategory.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskCategory.category_name }}</span\r\n >\r\n <button\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"riskList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedRiskCategories?.slice(1).length\r\n }}\r\n </button>\r\n\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=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"riskCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'riskCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >DISPLAY CRITERIA</label\r\n >\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n >\r\n Those Items that have been assigned to either the selected\r\n Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n >\r\n Those Items that have been assigned to both the selected\r\n Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n !dashboardForm?.selectedFromDate ||\r\n !dashboardForm?.selectedToDate\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedFromDate &&\r\n dashboardForm?.selectedToDate\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >TIMEFRAME</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information\r\n will be displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"from_date\"\r\n [value]=\"\r\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeFromDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div\r\n class=\"date-select\"\r\n *ngIf=\"!hideToDate\"\r\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n >\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"to_date\"\r\n [value]=\"\r\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeToDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm.selectedFromDate &&\r\n !dashboardForm.selectedToDate\r\n \"\r\n >\r\n Select a time-frame.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Email Summaries</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >If you would like to send a summary of this Dashboard, please\r\n select a frequency(By default VComply sends a weekly\r\n Summary).</label\r\n >\r\n <div\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Email Summaries\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n ></div>\r\n\r\n <button\r\n *ngIf=\"\r\n dashboardForm.frequencyMessage &&\r\n activeSelector !== 'frequency'\r\n \"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <button\r\n class=\"close-dialog\"\r\n type=\"button\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"close.emit({ mode: 'discard' })\"\r\n [arTooltip]=\"'[Esc] to close'\"\r\n placement=\"left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div\r\n class=\"global-confirmation-alert\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n Select a Responsibility Center, Program or Risk Category.\r\n </p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n Select a Responsibility Center or Program.\r\n </p>\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\">\r\n OKAY\r\n </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\r\n *ngIf=\"openConfigureWidgets\"\r\n [mode]=\"mode\"\r\n [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\"\r\n [showCompliance]=\"showComplianceWidgets\"\r\n [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
|
|
4252
4280
|
}
|
|
4253
4281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
|
|
4254
4282
|
type: Component,
|
|
4255
|
-
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\r\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n [class.animate-slideInRight]=\"animation\"\r\n >\r\n <div\r\n class=\"more-option\"\r\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-user-list\r\n *ngIf=\"activeSelector === 'whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n (closeUserList)=\"activateSelector('', false)\"\r\n [totalPages]=\"totalPages\"\r\n [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"\r\n [totalgroupscount]=\"totalgroups\"\r\n [feature]=\"feature\"\r\n ></app-user-list>\r\n <app-responsibility-center\r\n *ngIf=\"activeSelector === 'rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"\r\n dashboardForm.selectedResponsibilityCenters\r\n \"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"activateSelector('', false)\"\r\n >\r\n </app-responsibility-center>\r\n <app-categories\r\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\"\r\n [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"\r\n saveSelectedList('responsibilityCategories', $event)\r\n \"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-categories>\r\n <app-risk-categories\r\n *ngIf=\"activeSelector === 'riskCategories'\"\r\n [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-risk-categories>\r\n\r\n <app-frequency\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\"\r\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\"\r\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n >\r\n </app-frequency>\r\n </div>\r\n <div\r\n class=\"vx-dialog-container side-dialog\"\r\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div\r\n class=\"vx-dialog-body-container\"\r\n (scroll)=\"animateImage()\"\r\n [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n >\r\n <!-- Dashboard Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n *ngIf=\"\r\n !dashboardForm.dashboardName || activeSelector === 'name'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Dashboard Name\r\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n class=\"textField\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n />\r\n\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardName?.length > 30 ||\r\n !dashboardForm?.dashboardName)\r\n \"\r\n >\r\n {{\r\n dashboardForm.dashboardName.length > 30\r\n ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n : \"Please enter a name for this Dashboard.\"\r\n }}\r\n </p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n >{{\r\n 250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)\r\n }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n \"\r\n >\r\n You have exceeded the maximum character limit of 250\r\n characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'whoCanView' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length == 0 ||\r\n activeSelector === 'whoCanView'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 0 &&\r\n activeSelector !== 'whoCanView'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Who can view this dashboard?<span\r\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Who can view this dashboard?\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"user.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ user.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 1 &&\r\n !groupsEnabled\r\n \"\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n </button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"user?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n ) && !groupsEnabled\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\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 </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER(S)</span\r\n >\r\n <button\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userCount.popover()\"\r\n placement=\"left\"\r\n >\r\n {{ dashboardForm?.selectedViewers?.length }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n dashboardForm?.selectedGroup?.length &&\r\n dashboardForm?.selectedViewers?.length\r\n \"\r\n >&</span\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n id=\"usersandgroups\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER GROUP(S)</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"groupCount.popover()\"\r\n placement=\"right\"\r\n >\r\n {{ dashboardForm?.selectedGroup?.length }}\r\n </button>\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\r\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"data.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n data.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', data)\"\r\n ></i\r\n >\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\r\n class=\"value\"\r\n [arTooltip]=\"data.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('whoCanViewGroup', data)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'whoCanView'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rcList' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n activeSelector === 'rcList'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n activeSelector !== 'rcList'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RESPONSIBILITY CENTER(S)</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Responsibility Center(s) that you would like<br />displayed\r\n in the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rc.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rc.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rcList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n .length\r\n }}\r\n </button>\r\n\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=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rc?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'rcList'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'responsibilityCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 || activeSelector === 'responsibilityCategories'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n activeSelector !== 'responsibilityCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >PROGRAM</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Program(s) that you would like displayed in\r\n the<br />Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('responsibilityCategories', rCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rCategory.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rCategory.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories\r\n ?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rCategoryList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 1\r\n ).length\r\n }}\r\n </button>\r\n\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=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rCategory?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"\r\n remove(\r\n 'responsibilityCategories',\r\n rCategory\r\n )\r\n \"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'riskCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n activeSelector === 'riskCategories'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n activeSelector !== 'riskCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RISK CATEGORIES</label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Risk Categories that you would like displayed<br />in\r\n the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"riskCategory.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskCategory.category_name }}</span\r\n >\r\n <button\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"riskList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedRiskCategories?.slice(1).length\r\n }}\r\n </button>\r\n\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=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"riskCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'riskCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >DISPLAY CRITERIA</label\r\n >\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n >\r\n Those Items that have been assigned to either the selected\r\n Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n >\r\n Those Items that have been assigned to both the selected\r\n Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n !dashboardForm?.selectedFromDate ||\r\n !dashboardForm?.selectedToDate\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedFromDate &&\r\n dashboardForm?.selectedToDate\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >TIMEFRAME</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information\r\n will be displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"from_date\"\r\n [value]=\"\r\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeFromDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div\r\n class=\"date-select\"\r\n *ngIf=\"!hideToDate\"\r\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n >\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"to_date\"\r\n [value]=\"\r\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeToDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm.selectedFromDate &&\r\n !dashboardForm.selectedToDate\r\n \"\r\n >\r\n Select a time-frame.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Email Summaries</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >If you would like to send a summary of this Dashboard, please\r\n select a frequency(By default VComply sends a weekly\r\n Summary).</label\r\n >\r\n <div\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Email Summaries\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n ></div>\r\n\r\n <button\r\n *ngIf=\"\r\n dashboardForm.frequencyMessage &&\r\n activeSelector !== 'frequency'\r\n \"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <button\r\n class=\"close-dialog\"\r\n type=\"button\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"close.emit({ mode: 'discard' })\"\r\n [arTooltip]=\"'[Esc] to close'\"\r\n placement=\"left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div\r\n class=\"global-confirmation-alert\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n Select a Responsibility Center, Program or Risk Category.\r\n </p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n Select a Responsibility Center or Program.\r\n </p>\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\">\r\n OKAY\r\n </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\r\n *ngIf=\"openConfigureWidgets\"\r\n [mode]=\"mode\"\r\n [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\"\r\n [showCompliance]=\"showComplianceWidgets\"\r\n [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
|
|
4283
|
+
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\r\n class=\"create-dashboard-container vx-d-flex vx-justify-end\"\r\n [class.animate-slideInRight]=\"animation\"\r\n >\r\n <div\r\n class=\"more-option\"\r\n *ngIf=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-user-list\r\n *ngIf=\"activeSelector === 'whoCanView'\"\r\n (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\"\r\n (closeUserList)=\"activateSelector('', false)\"\r\n [totalPages]=\"totalPages\"\r\n [totalList]=\"totalList\"\r\n [listDetails]=\"listDetails\"\r\n [totalgroupscount]=\"totalgroups\"\r\n [feature]=\"feature\"\r\n ></app-user-list>\r\n <app-responsibility-center\r\n *ngIf=\"activeSelector === 'rcList'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"false\"\r\n [selectedResponsibilityCenters]=\"\r\n dashboardForm.selectedResponsibilityCenters\r\n \"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"activateSelector('', false)\"\r\n >\r\n </app-responsibility-center>\r\n <app-categories\r\n *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n [categoryList]=\"responsibilityCategoriesTree\"\r\n [allCategories]=\"allComplianceCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n (saveSelectedCategory)=\"\r\n saveSelectedList('responsibilityCategories', $event)\r\n \"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-categories>\r\n <app-risk-categories\r\n *ngIf=\"activeSelector === 'riskCategories'\"\r\n [categoryList]=\"riskCategoryList\"\r\n [allCategories]=\"allRiskCategories\"\r\n [categoryIdKey]=\"'category_id'\"\r\n [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n (saveSelectedCategory)=\"saveSelectedList('riskCategory', $event)\"\r\n (closeCategoriesList)=\"activateSelector('', false)\"\r\n ></app-risk-categories>\r\n\r\n <app-frequency\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n (saveFrequency)=\"saveFrequency($event)\"\r\n [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n [selectedDate]=\"dashboardForm.frequencyDate\"\r\n [savedFrequencies]=\"dashboardForm.selectedFrequencies\"\r\n >\r\n </app-frequency>\r\n </div>\r\n <div\r\n class=\"vx-dialog-container side-dialog\"\r\n [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div\r\n class=\"vx-dialog-body-container\"\r\n (scroll)=\"animateImage()\"\r\n [class.hidden-scroll]=\"popoverService.stopScroll\"\r\n >\r\n <!-- Dashboard Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardIcon\"\r\n *ngIf=\"\r\n !dashboardForm.dashboardName || activeSelector === 'name'\r\n \"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Dashboard Name\r\n <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n class=\"textField\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardForm.dashboardName\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n />\r\n\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardName?.length > 0\"\r\n >{{ 30 - dashboardForm.dashboardName.length }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardName?.length > 30 ||\r\n !dashboardForm?.dashboardName)\r\n \"\r\n >\r\n {{\r\n dashboardForm.dashboardName.length > 30\r\n ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n : \"Please enter a name for this Dashboard.\"\r\n }}\r\n </p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\"\r\n >{{\r\n 250 -\r\n (dashboardForm?.dashboardDescriptionText | textCount)\r\n }}</span\r\n >\r\n </div>\r\n\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n \"\r\n >\r\n You have exceeded the maximum character limit of 250\r\n characters.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'whoCanView'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'whoCanView' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length == 0 ||\r\n activeSelector === 'whoCanView'\r\n \"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 0 &&\r\n activeSelector !== 'whoCanView'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Who can view this dashboard?<span\r\n class=\"require vx-txt-red vx-fs-16 vx-fw-400\"\r\n >*</span\r\n ></label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Who can view this dashboard?\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"user.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ user.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedViewers?.length > 1 &&\r\n !groupsEnabled\r\n \"\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n </button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let user of dashboardForm?.selectedViewers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"user?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n user.member_id\r\n ) && !groupsEnabled\r\n \"\r\n (click)=\"remove('whoCanView', user)\"\r\n ></i\r\n >\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 </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER(S)</span\r\n >\r\n <button\r\n class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"userCount.popover()\"\r\n placement=\"left\"\r\n >\r\n {{ dashboardForm?.selectedViewers?.length }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n dashboardForm?.selectedGroup?.length &&\r\n dashboardForm?.selectedViewers?.length\r\n \"\r\n >&</span\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedGroup?.length\"\r\n id=\"usersandgroups\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n >USER GROUP(S)</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"groupCount.popover()\"\r\n placement=\"right\"\r\n >\r\n {{ dashboardForm?.selectedGroup?.length }}\r\n </button>\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\r\n *ngFor=\"let data of dashboardForm?.selectedViewers\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"data.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n *ngIf=\"\r\n !listDetails.nonRemovableUsersList.includes(\r\n data.member_id\r\n )\r\n \"\r\n (click)=\"remove('whoCanView', data)\"\r\n ></i\r\n >\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\r\n class=\"value\"\r\n [arTooltip]=\"data.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('whoCanViewGroup', data)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'whoCanView'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('whoCanView', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rcList'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rcList' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n activeSelector === 'rcList'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardRcIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n activeSelector !== 'rcList'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RESPONSIBILITY CENTER(S)</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Responsibility Center(s) that you would like<br />displayed\r\n in the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rc.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rc.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rcList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n .length\r\n }}\r\n </button>\r\n\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=\"\r\n let rc of dashboardForm?.selectedResponsibilityCenters\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rc?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('rc', rc)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'rcList'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('rcList', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'responsibilityCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 || activeSelector === 'responsibilityCategories'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0 &&\r\n activeSelector !== 'responsibilityCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >PROGRAM</label\r\n >\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0\r\n \"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Program(s) that you would like displayed in\r\n the<br />Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories?.length > 0\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('responsibilityCategories', rCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"rCategory.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rCategory.item_name }}</span\r\n >\r\n <button\r\n *ngIf=\"\r\n dashboardForm?.selectedResponsibilityCategories\r\n ?.length > 1\r\n \"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"rCategoryList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedResponsibilityCategories?.slice(\r\n 1\r\n ).length\r\n }}\r\n </button>\r\n\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=\"\r\n let rCategory of dashboardForm?.selectedResponsibilityCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"rCategory?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"\r\n remove(\r\n 'responsibilityCategories',\r\n rCategory\r\n )\r\n \"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('responsibilityCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'riskCategories'\"\r\n *ngIf=\"showRiskCategory && isManageRisk\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'riskCategories' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length == 0 ||\r\n activeSelector === 'riskCategories'\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardRiskIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedRiskCategories?.length > 0 &&\r\n activeSelector !== 'riskCategories'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >RISK CATEGORIES</label\r\n >\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n [class.error]=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length ==\r\n 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the Risk Categories that you would like displayed<br />in\r\n the Dashboard, if any.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\r\n 0,\r\n 1\r\n )\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [arTooltip]=\"riskCategory.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskCategory.category_name }}</span\r\n >\r\n <button\r\n *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"riskList.popover()\"\r\n placement=\"left\"\r\n >\r\n +{{\r\n dashboardForm?.selectedRiskCategories?.slice(1).length\r\n }}\r\n </button>\r\n\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=\"\r\n let riskCategory of dashboardForm?.selectedRiskCategories\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [arTooltip]=\"riskCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n class=\"icons cross-icon\"\r\n (click)=\"remove('riskCategory', riskCategory)\"\r\n ></i\r\n >\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\r\n <button\r\n *ngIf=\"activeSelector !== 'riskCategories'\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('riskCategories', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"dashboardForm?.displayCriteria?.length == 0\"\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm?.displayCriteria?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >DISPLAY CRITERIA</label\r\n >\r\n <div class=\"radio-group\" *ngIf=\"showCriteria\">\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'or'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'or'\"\r\n >\r\n Those Items that have been assigned to either the selected\r\n Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n\r\n <app-cs-radio\r\n [checked]=\"dashboardForm.displayCriteria == 'and'\"\r\n (checkedEvent)=\"dashboardForm.displayCriteria = 'and'\"\r\n >\r\n Those Items that have been assigned to both the selected\r\n Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"\r\n !dashboardForm?.selectedFromDate ||\r\n !dashboardForm?.selectedToDate\r\n \"\r\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"\r\n dashboardForm?.selectedFromDate &&\r\n dashboardForm?.selectedToDate\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >TIMEFRAME</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information\r\n will be displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"from_date\"\r\n [value]=\"\r\n dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeFromDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div\r\n class=\"date-select\"\r\n *ngIf=\"!hideToDate\"\r\n [class.disabled]=\"!dashboardForm?.selectedFromDate\"\r\n >\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n id=\"to_date\"\r\n [value]=\"\r\n dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n \"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"\r\n closeToDatePicker(); datePickerOverlay = false\r\n \"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <p\r\n class=\"vx-txt-error\"\r\n [appScrollInView]=\"true\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm.selectedFromDate &&\r\n !dashboardForm.selectedToDate\r\n \"\r\n >\r\n Select a time-frame.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n activeSelector !== 'name'\r\n \"\r\n >\r\n <div class=\"image\">\r\n <img\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n <svg\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group vx-d-block\">\r\n <label\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n >Email Summaries</label\r\n >\r\n <label class=\"vx-control-panel-sub-label\"\r\n >If you would like to send a summary of this Dashboard, please\r\n select a frequency(By default VComply sends a weekly\r\n Summary).</label\r\n >\r\n <div\r\n *ngIf=\"!dashboardForm.frequencyMessage\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Email Summaries\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"dashboardForm.frequencyMessage\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n ></div>\r\n\r\n <button\r\n *ngIf=\"\r\n dashboardForm.frequencyMessage &&\r\n activeSelector !== 'frequency'\r\n \"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <button\r\n class=\"close-dialog\"\r\n type=\"button\"\r\n [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n (click)=\"close.emit({ mode: 'discard' })\"\r\n [arTooltip]=\"'[Esc] to close'\"\r\n placement=\"left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [class.hide]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div\r\n class=\"global-confirmation-alert\"\r\n *ngIf=\"\r\n submitted &&\r\n dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n dashboardForm?.selectedResponsibilityCategories?.length == 0 &&\r\n dashboardForm?.selectedRiskCategories?.length == 0\r\n \"\r\n >\r\n <div class=\"global-confirmation-alert-top\">\r\n <span class=\"icon-block\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n Select a Responsibility Center, Program or Risk Category.\r\n </p>\r\n <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n Select a Responsibility Center or Program.\r\n </p>\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\">\r\n OKAY\r\n </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\r\n *ngIf=\"openConfigureWidgets\"\r\n [mode]=\"mode\"\r\n [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\"\r\n [showCompliance]=\"showComplianceWidgets\"\r\n [selectedWidgetsData]=\"selectedWidgets\"\r\n (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"\r\n></app-configure-widgets>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}\n"] }]
|
|
4256
4284
|
}], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
|
|
4257
4285
|
type: Input
|
|
4258
4286
|
}], mode: [{
|
|
@@ -4343,7 +4371,9 @@ class CsSelectComponent {
|
|
|
4343
4371
|
}
|
|
4344
4372
|
}
|
|
4345
4373
|
writeValue(value) {
|
|
4346
|
-
|
|
4374
|
+
if (value) {
|
|
4375
|
+
this.RadioVal = value;
|
|
4376
|
+
}
|
|
4347
4377
|
}
|
|
4348
4378
|
registerOnChange(fn) {
|
|
4349
4379
|
this.onChange = fn;
|
|
@@ -4995,7 +5025,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4995
5025
|
}]
|
|
4996
5026
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
|
|
4997
5027
|
|
|
4998
|
-
// import { ConfigureWidgetsComponent } from '../../configure-widgets/configure-widgets/configure-widgets.component';
|
|
4999
5028
|
class FormGroupComponent {
|
|
5000
5029
|
dialog;
|
|
5001
5030
|
openCategoryList = new EventEmitter();
|
|
@@ -5017,6 +5046,7 @@ class FormGroupComponent {
|
|
|
5017
5046
|
dashboardNameError;
|
|
5018
5047
|
dashboardDescriptionError;
|
|
5019
5048
|
displayCriteria;
|
|
5049
|
+
ASSETS = ASSETS;
|
|
5020
5050
|
constructor(dialog) {
|
|
5021
5051
|
this.dialog = dialog;
|
|
5022
5052
|
}
|
|
@@ -5039,7 +5069,7 @@ class FormGroupComponent {
|
|
|
5039
5069
|
this.datePickerOverlay = true;
|
|
5040
5070
|
}
|
|
5041
5071
|
closeFromDatePicker() {
|
|
5042
|
-
let minToDate = this.selectedFromDate
|
|
5072
|
+
let minToDate = this.selectedFromDate?.clone()?.add(1, 'days');
|
|
5043
5073
|
this.toDatePickerConfig = { min: minToDate, minTime: minToDate };
|
|
5044
5074
|
if (this.selectedToDate && minToDate.diff(this.selectedToDate) > 0) {
|
|
5045
5075
|
this.selectedToDate = undefined;
|
|
@@ -5113,11 +5143,11 @@ class FormGroupComponent {
|
|
|
5113
5143
|
this.displayCriteria = selection;
|
|
5114
5144
|
}
|
|
5115
5145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormGroupComponent, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Dashboard Name<span class=\"required\">*</span></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardName\"\r\n />\r\n <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\r\n 30 - dashboardName?.length\r\n }}</span>\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\r\n <div class=\"vx-input-group\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardDescriptionText?.length > 0\"\r\n >{{ 250 - dashboardDescriptionText?.length }}</span\r\n >\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Who can view this dashboard?<span class=\"required\">*</span></label\r\n >\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Who can view this dashboard?\"\r\n readonly\r\n (click)=\"selectWhoCanViewThis()\"\r\n />\r\n </div>\r\n <div class=\"selected\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\">\r\n <span class=\"value\">Samantha Jones</span>\r\n </span>\r\n <span class=\"chip\">\r\n <i class=\"icons\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectResponsibilityCenter()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">PROGRAM</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\">\r\n <app-cs-radio\r\n (checkedEvent)=\"\r\n displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\r\n \"\r\n >Those responsibilities that have been assigned to both the\r\n selected Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n <app-cs-radio\r\n (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\r\n >Those responsibilities that have been assigned to either the\r\n selected Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <!--active class will appear on open list-->\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries\r\n <i\r\n class=\"icons\"\r\n [arTooltip]=\"'This is a test tooltip'\"\r\n placement=\"bottom-left\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard, please select\r\n a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Email Summaries\"\r\n readonly\r\n (click)=\"selectFrequency()\"\r\n />\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::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 .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
5146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormGroupComponent, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Dashboard Name<span class=\"required\">*</span></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardName\"\r\n />\r\n <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\r\n 30 - dashboardName?.length\r\n }}</span>\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\r\n <div class=\"vx-input-group\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardDescriptionText?.length > 0\"\r\n >{{ 250 - dashboardDescriptionText?.length }}</span\r\n >\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Who can view this dashboard?<span class=\"required\">*</span></label\r\n >\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Who can view this dashboard?\"\r\n readonly\r\n (click)=\"selectWhoCanViewThis()\"\r\n />\r\n </div>\r\n <div class=\"selected\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\">\r\n <span class=\"value\">Samantha Jones</span>\r\n </span>\r\n <span class=\"chip\">\r\n <i class=\"icons\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectResponsibilityCenter()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">PROGRAM</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\">\r\n <app-cs-radio\r\n (checkedEvent)=\"\r\n displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\r\n \"\r\n >Those responsibilities that have been assigned to both the\r\n selected Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n <app-cs-radio\r\n (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\r\n >Those responsibilities that have been assigned to either the\r\n selected Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <!--active class will appear on open list-->\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries\r\n <i\r\n class=\"icons\"\r\n [arTooltip]=\"'This is a test tooltip'\"\r\n placement=\"bottom-left\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard, please select\r\n a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Email Summaries\"\r\n readonly\r\n (click)=\"selectFrequency()\"\r\n />\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::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 .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i19.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
5117
5147
|
}
|
|
5118
5148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
5119
5149
|
type: Component,
|
|
5120
|
-
args: [{ selector: 'app-form-group', template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Dashboard Name<span class=\"required\">*</span></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardName\"\r\n />\r\n <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\r\n 30 - dashboardName?.length\r\n }}</span>\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\r\n <div class=\"vx-input-group\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardDescriptionText?.length > 0\"\r\n >{{ 250 - dashboardDescriptionText?.length }}</span\r\n >\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Who can view this dashboard?<span class=\"required\">*</span></label\r\n >\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Who can view this dashboard?\"\r\n readonly\r\n (click)=\"selectWhoCanViewThis()\"\r\n />\r\n </div>\r\n <div class=\"selected\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\">\r\n <span class=\"value\">Samantha Jones</span>\r\n </span>\r\n <span class=\"chip\">\r\n <i class=\"icons\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectResponsibilityCenter()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">PROGRAM</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\">\r\n <app-cs-radio\r\n (checkedEvent)=\"\r\n displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\r\n \"\r\n >Those responsibilities that have been assigned to both the\r\n selected Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n <app-cs-radio\r\n (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\r\n >Those responsibilities that have been assigned to either the\r\n selected Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <!--active class will appear on open list-->\r\n <div class=\"image\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg\"\r\n alt=\"\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries\r\n <i\r\n class=\"icons\"\r\n [arTooltip]=\"'This is a test tooltip'\"\r\n placement=\"bottom-left\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard, please select\r\n a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Email Summaries\"\r\n readonly\r\n (click)=\"selectFrequency()\"\r\n />\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::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 .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
|
|
5150
|
+
args: [{ selector: 'app-form-group', template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Dashboard Name<span class=\"required\">*</span></label\r\n >\r\n <div class=\"vx-input-group\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n [(ngModel)]=\"dashboardName\"\r\n />\r\n <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\r\n 30 - dashboardName?.length\r\n }}</span>\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\r\n <div class=\"vx-input-group\">\r\n <vcomply-editor\r\n [editorConfig]=\"dashboardDescription\"\r\n [(ngModel)]=\"dashboardDescriptionText\"\r\n ></vcomply-editor>\r\n <span\r\n class=\"counter\"\r\n *ngIf=\"dashboardDescriptionText?.length > 0\"\r\n >{{ 250 - dashboardDescriptionText?.length }}</span\r\n >\r\n </div>\r\n <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Who can view this dashboard?<span class=\"required\">*</span></label\r\n >\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Who can view this dashboard?\"\r\n readonly\r\n (click)=\"selectWhoCanViewThis()\"\r\n />\r\n </div>\r\n <div class=\"selected\">\r\n <div class=\"left\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\">\r\n <span class=\"value\">Samantha Jones</span>\r\n </span>\r\n <span class=\"chip\">\r\n <i class=\"icons\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectResponsibilityCenter()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">PROGRAM</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n <div class=\"selectbox\">\r\n <div\r\n class=\"custom-input\"\r\n aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n (click)=\"selectCategories()\"\r\n ></div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n <div class=\"radio-group\">\r\n <app-cs-radio\r\n (checkedEvent)=\"\r\n displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\r\n \"\r\n >Those responsibilities that have been assigned to both the\r\n selected Responsibility Center(s) and the selected\r\n Categories.</app-cs-radio\r\n >\r\n <app-cs-radio\r\n (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\r\n >Those responsibilities that have been assigned to either the\r\n selected Responsibility Center(s) or the selected\r\n Categories.</app-cs-radio\r\n >\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\"\r\n >Select how long you would like the information selected to be\r\n displayed for. If no timeframe is selected, the information will be\r\n displayed permanently.</label\r\n >\r\n <div class=\"input-group vx-d-flex vx-justify-between\">\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'From'\"\r\n (click)=\"openFromDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #fromDatePicker\r\n [(ngModel)]=\"selectedFromDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n [config]=\"fromDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeFromDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n <div class=\"date-select\">\r\n <i class=\"icons\"></i>\r\n <input\r\n type=\"text\"\r\n [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"'To'\"\r\n (click)=\"openToDatePicker()\"\r\n readonly\r\n />\r\n <dp-date-picker\r\n #toDatePicker\r\n [(ngModel)]=\"selectedToDate\"\r\n placeholder=\"Select Date\"\r\n (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n [config]=\"toDatePickerConfig\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeToDatePicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <!--active class will appear on open list-->\r\n <div class=\"image\">\r\n <img\r\n [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n alt=\"\"\r\n width=\"36\"\r\n height=\"36\"\r\n />\r\n </div>\r\n <div class=\"form\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Email Summaries\r\n <i\r\n class=\"icons\"\r\n [arTooltip]=\"'This is a test tooltip'\"\r\n placement=\"bottom-left\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <label class=\"vx-control-panel-sub-label\">\r\n If you would like to send a summary of this Dashboard, please select\r\n a frequency(By default VComply sends a weekly Summary).\r\n </label>\r\n <div class=\"selectbox\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Email Summaries\"\r\n readonly\r\n (click)=\"selectFrequency()\"\r\n />\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button\r\n class=\"vx-btn block primary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"configureDashboard()\"\r\n >\r\n Next: Configure Widgets\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::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 .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
|
|
5121
5151
|
}], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { openCategoryList: [{
|
|
5122
5152
|
type: Output
|
|
5123
5153
|
}], openResponsibilityCenterList: [{
|
|
@@ -5205,7 +5235,8 @@ class ConfigureWidgetsModule {
|
|
|
5205
5235
|
FormgroupModule,
|
|
5206
5236
|
FormsModule,
|
|
5207
5237
|
DirectivesModule,
|
|
5208
|
-
NoDataModule
|
|
5238
|
+
NoDataModule,
|
|
5239
|
+
NgOptimizedImage], exports: [ConfigureWidgetsComponent] });
|
|
5209
5240
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsModule, imports: [CommonModule,
|
|
5210
5241
|
FloatingBarModule,
|
|
5211
5242
|
FormgroupModule,
|
|
@@ -5225,7 +5256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5225
5256
|
FormgroupModule,
|
|
5226
5257
|
FormsModule,
|
|
5227
5258
|
DirectivesModule,
|
|
5228
|
-
NoDataModule
|
|
5259
|
+
NoDataModule,
|
|
5260
|
+
NgOptimizedImage
|
|
5229
5261
|
],
|
|
5230
5262
|
exports: [
|
|
5231
5263
|
ConfigureWidgetsComponent
|
|
@@ -5244,25 +5276,25 @@ class LoaderComponent {
|
|
|
5244
5276
|
}
|
|
5245
5277
|
ngOnInit() { }
|
|
5246
5278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n <img
|
|
5279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\r\n <div class=\"loader-index\">\r\n <div class=\"loader-index-circle\"></div>\r\n </div>\r\n</div>\r\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }] });
|
|
5248
5280
|
}
|
|
5249
5281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
5250
5282
|
type: Component,
|
|
5251
|
-
args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n <img
|
|
5283
|
+
args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n <img [ngSrc]=\"vLoader\" alt=\"\" width=\"45\" height=\"45\" />\r\n <div class=\"loader-index\">\r\n <div class=\"loader-index-circle\"></div>\r\n </div>\r\n</div>\r\n", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
5252
5284
|
}], ctorParameters: function () { return [{ type: Configurations, decorators: [{
|
|
5253
5285
|
type: Optional
|
|
5254
5286
|
}] }]; } });
|
|
5255
5287
|
|
|
5256
5288
|
class VLoaderModule {
|
|
5257
5289
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5258
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule], exports: [LoaderComponent, LoaderInlineComponent] });
|
|
5290
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule, NgOptimizedImage], exports: [LoaderComponent, LoaderInlineComponent] });
|
|
5259
5291
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, imports: [CommonModule] });
|
|
5260
5292
|
}
|
|
5261
5293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VLoaderModule, decorators: [{
|
|
5262
5294
|
type: NgModule,
|
|
5263
5295
|
args: [{
|
|
5264
5296
|
declarations: [LoaderComponent, LoaderInlineComponent],
|
|
5265
|
-
imports: [CommonModule],
|
|
5297
|
+
imports: [CommonModule, NgOptimizedImage],
|
|
5266
5298
|
exports: [LoaderComponent, LoaderInlineComponent],
|
|
5267
5299
|
}]
|
|
5268
5300
|
}] });
|
|
@@ -5295,14 +5327,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5295
5327
|
}]
|
|
5296
5328
|
}] });
|
|
5297
5329
|
|
|
5330
|
+
class ConfigureBaseUrlService {
|
|
5331
|
+
ASSETS = ASSETS;
|
|
5332
|
+
env;
|
|
5333
|
+
constructor(config) {
|
|
5334
|
+
if (config) {
|
|
5335
|
+
this.env = config?.envConfig;
|
|
5336
|
+
}
|
|
5337
|
+
}
|
|
5338
|
+
updateBaseUrl() {
|
|
5339
|
+
Object.keys(this.ASSETS).forEach((key) => {
|
|
5340
|
+
this.ASSETS[key] = `${this.env?.cdnUrl}${this.ASSETS[key]}`;
|
|
5341
|
+
});
|
|
5342
|
+
}
|
|
5343
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5344
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, providedIn: 'root' });
|
|
5345
|
+
}
|
|
5346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureBaseUrlService, decorators: [{
|
|
5347
|
+
type: Injectable,
|
|
5348
|
+
args: [{
|
|
5349
|
+
providedIn: 'root',
|
|
5350
|
+
}]
|
|
5351
|
+
}], ctorParameters: function () { return [{ type: Configurations, decorators: [{
|
|
5352
|
+
type: Optional
|
|
5353
|
+
}] }]; } });
|
|
5354
|
+
|
|
5298
5355
|
class CreateDashboardModule {
|
|
5356
|
+
configureBaseUrlService;
|
|
5357
|
+
constructor(configureBaseUrlService) {
|
|
5358
|
+
this.configureBaseUrlService = configureBaseUrlService;
|
|
5359
|
+
this.setBaseUrl();
|
|
5360
|
+
}
|
|
5299
5361
|
static forRoot(environmentConfig) {
|
|
5300
5362
|
return {
|
|
5301
5363
|
ngModule: CreateDashboardModule,
|
|
5302
5364
|
providers: [{ provide: Configurations, useValue: environmentConfig }],
|
|
5303
5365
|
};
|
|
5304
5366
|
}
|
|
5305
|
-
|
|
5367
|
+
setBaseUrl() {
|
|
5368
|
+
this.configureBaseUrlService.updateBaseUrl();
|
|
5369
|
+
}
|
|
5370
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, deps: [{ token: ConfigureBaseUrlService }], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5306
5371
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
|
|
5307
5372
|
UserListComponent,
|
|
5308
5373
|
FormGroupComponent,
|
|
@@ -5328,7 +5393,8 @@ class CreateDashboardModule {
|
|
|
5328
5393
|
NoDataModule,
|
|
5329
5394
|
DirectivesModule,
|
|
5330
5395
|
SmileyDialogModule,
|
|
5331
|
-
DpDatePickerModule
|
|
5396
|
+
DpDatePickerModule,
|
|
5397
|
+
NgOptimizedImage], exports: [CreateDashboardComponent] });
|
|
5332
5398
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
|
|
5333
5399
|
VcomplyEditorModule,
|
|
5334
5400
|
FormgroupModule,
|
|
@@ -5381,10 +5447,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5381
5447
|
DirectivesModule,
|
|
5382
5448
|
SmileyDialogModule,
|
|
5383
5449
|
DpDatePickerModule,
|
|
5450
|
+
NgOptimizedImage,
|
|
5384
5451
|
],
|
|
5385
5452
|
exports: [CreateDashboardComponent],
|
|
5386
5453
|
}]
|
|
5387
|
-
}] });
|
|
5454
|
+
}], ctorParameters: function () { return [{ type: ConfigureBaseUrlService }]; } });
|
|
5388
5455
|
|
|
5389
5456
|
/*
|
|
5390
5457
|
* Public API Surface of create-dashboard
|