vc-create-dashboard 3.0.0 → 3.0.1
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/create-dashboard.component.mjs +11 -11
- package/esm2022/lib/create-dashboard-container/create-dashboard.module.mjs +6 -10
- package/esm2022/lib/create-dashboard-container/form-group/form-group.component.mjs +4 -4
- package/esm2022/lib/ui-kit/dialog/dialog.component.mjs +12 -9
- package/fesm2022/vc-create-dashboard.mjs +25 -25
- package/fesm2022/vc-create-dashboard.mjs.map +1 -1
- package/lib/create-dashboard-container/create-dashboard.module.d.ts +16 -16
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Pipe, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
|
|
3
3
|
import * as dayjs from 'dayjs';
|
|
4
4
|
import * as i1 from '@angular/common/http';
|
|
5
5
|
import { HttpHeaders, HttpParams } from '@angular/common/http';
|
|
@@ -10,13 +10,13 @@ import * as i1$1 from '@angular/common';
|
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
11
|
import * as i8 from '@vcomply/editor';
|
|
12
12
|
import { VcomplyEditorModule } from '@vcomply/editor';
|
|
13
|
-
import * as
|
|
14
|
-
import { DpDatePickerModule } from 'ng2-date-picker';
|
|
15
|
-
import * as i3 from '@angular/forms';
|
|
13
|
+
import * as i5 from '@angular/forms';
|
|
16
14
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
15
|
+
import * as i19 from 'ng2-date-picker';
|
|
16
|
+
import { DpDatePickerModule } from 'ng2-date-picker';
|
|
17
17
|
import { nanoid } from 'nanoid';
|
|
18
18
|
import * as i1$2 from '@angular/platform-browser';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i5$1 from '@angular/router';
|
|
20
20
|
import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
|
|
21
21
|
|
|
22
22
|
let CreateDashboardService$1 = class CreateDashboardService {
|
|
@@ -1009,7 +1009,7 @@ class CsCheckboxComponent {
|
|
|
1009
1009
|
this.ngValueChange.emit(this.ngValue);
|
|
1010
1010
|
}
|
|
1011
1011
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n <span class=\"checkbox\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type:
|
|
1012
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n <span class=\"checkbox\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
|
|
1013
1013
|
}
|
|
1014
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, decorators: [{
|
|
1015
1015
|
type: Component,
|
|
@@ -1608,7 +1608,7 @@ class ConfigureWidgetsComponent {
|
|
|
1608
1608
|
});
|
|
1609
1609
|
}
|
|
1610
1610
|
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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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" }] });
|
|
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" }] });
|
|
1612
1612
|
}
|
|
1613
1613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
|
|
1614
1614
|
type: Component,
|
|
@@ -2327,7 +2327,7 @@ class UserListComponent {
|
|
|
2327
2327
|
});
|
|
2328
2328
|
}
|
|
2329
2329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2330
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\"></i> {{element.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 element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\"></i> {{element?.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 <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
|
|
2330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\"></i> {{element.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 element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\"></i> {{element?.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 <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#fff;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34aa44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#f1f1f1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
|
|
2331
2331
|
}
|
|
2332
2332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserListComponent, decorators: [{
|
|
2333
2333
|
type: Component,
|
|
@@ -2497,7 +2497,7 @@ class ResponsibilityCenterComponent {
|
|
|
2497
2497
|
this.closeRcList.emit();
|
|
2498
2498
|
}
|
|
2499
2499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\"></i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\"></i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2501
2501
|
}
|
|
2502
2502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
|
|
2503
2503
|
type: Component,
|
|
@@ -2696,7 +2696,7 @@ class CategoriesComponent {
|
|
|
2696
2696
|
this.closeCategoriesList.emit();
|
|
2697
2697
|
}
|
|
2698
2698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2700
2700
|
}
|
|
2701
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesComponent, decorators: [{
|
|
2702
2702
|
type: Component,
|
|
@@ -2882,7 +2882,7 @@ class RiskCategoriesComponent {
|
|
|
2882
2882
|
this.closeCategoriesList.emit();
|
|
2883
2883
|
}
|
|
2884
2884
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2885
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2886
2886
|
}
|
|
2887
2887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
|
|
2888
2888
|
type: Component,
|
|
@@ -3187,7 +3187,7 @@ class FrequencyComponent {
|
|
|
3187
3187
|
}
|
|
3188
3188
|
}
|
|
3189
3189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
|
|
3190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#fff;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
|
|
3191
3191
|
}
|
|
3192
3192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyComponent, decorators: [{
|
|
3193
3193
|
type: Component,
|
|
@@ -4248,7 +4248,7 @@ class CreateDashboardComponent {
|
|
|
4248
4248
|
}
|
|
4249
4249
|
}
|
|
4250
4250
|
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: "component", type: i10.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
|
|
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" }] });
|
|
4252
4252
|
}
|
|
4253
4253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
|
|
4254
4254
|
type: Component,
|
|
@@ -4496,7 +4496,7 @@ class CsSwitchComponent {
|
|
|
4496
4496
|
this.ngValueChange.emit(this.ngValue);
|
|
4497
4497
|
}
|
|
4498
4498
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4499
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n <!-- [class.large]=\"large\" -->\r\n <span class=\"value\">\r\n <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <i class=\"vc-icons\"></i>\r\n </span> -->\r\n </span>\r\n <!-- [class.last]=\"last\" -->\r\n <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n <span\r\n class=\"switch\"\r\n *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n [arTooltip]=\"tooltipMessage\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
4499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n <!-- [class.large]=\"large\" -->\r\n <span class=\"value\">\r\n <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <i class=\"vc-icons\"></i>\r\n </span> -->\r\n </span>\r\n <!-- [class.last]=\"last\" -->\r\n <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n <span\r\n class=\"switch\"\r\n *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n [arTooltip]=\"tooltipMessage\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
|
|
4500
4500
|
}
|
|
4501
4501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, decorators: [{
|
|
4502
4502
|
type: Component,
|
|
@@ -4901,13 +4901,16 @@ class DialogComponent {
|
|
|
4901
4901
|
this.onDialogClose.next(data);
|
|
4902
4902
|
document.body.style.overflow = 'auto';
|
|
4903
4903
|
}
|
|
4904
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token:
|
|
4904
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: 'router' }], target: i0.ɵɵFactoryTarget.Component });
|
|
4905
4905
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n class=\"overlay\"\r\n (click)=\"onOverlayClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER',\r\n black: background === 'black'\r\n }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n <div\r\n class=\"dialog\"\r\n [class.animate]=\"animation\"\r\n (click)=\"onDialogClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER'\r\n }\"\r\n >\r\n <ng-template appInsertion></ng-template>\r\n </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }] });
|
|
4906
4906
|
}
|
|
4907
4907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
4908
4908
|
type: Component,
|
|
4909
4909
|
args: [{ selector: 'app-dialog', template: "<div\r\n class=\"overlay\"\r\n (click)=\"onOverlayClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER',\r\n black: background === 'black'\r\n }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n <div\r\n class=\"dialog\"\r\n [class.animate]=\"animation\"\r\n (click)=\"onDialogClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER'\r\n }\"\r\n >\r\n <ng-template appInsertion></ng-template>\r\n </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
|
|
4910
|
-
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type:
|
|
4910
|
+
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i5$1.Router, decorators: [{
|
|
4911
|
+
type: Inject,
|
|
4912
|
+
args: ['router']
|
|
4913
|
+
}] }]; }, propDecorators: { insertionPoint: [{
|
|
4911
4914
|
type: ViewChild,
|
|
4912
4915
|
args: [InsertionDirective, { static: true }]
|
|
4913
4916
|
}] } });
|
|
@@ -5110,7 +5113,7 @@ class FormGroupComponent {
|
|
|
5110
5113
|
this.displayCriteria = selection;
|
|
5111
5114
|
}
|
|
5112
5115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5113
|
-
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: "component", type: i10.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
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" }] });
|
|
5114
5117
|
}
|
|
5115
5118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
5116
5119
|
type: Component,
|
|
@@ -5309,10 +5312,8 @@ class CreateDashboardModule {
|
|
|
5309
5312
|
FrequencyComponent,
|
|
5310
5313
|
FilterPipe,
|
|
5311
5314
|
TextCountPipe], imports: [CommonModule,
|
|
5312
|
-
// MarxEditorModule,
|
|
5313
5315
|
VcomplyEditorModule,
|
|
5314
5316
|
FormgroupModule,
|
|
5315
|
-
DpDatePickerModule,
|
|
5316
5317
|
FormsModule,
|
|
5317
5318
|
TooltipModule,
|
|
5318
5319
|
SelectModule,
|
|
@@ -5326,12 +5327,11 @@ class CreateDashboardModule {
|
|
|
5326
5327
|
SnackBarModule,
|
|
5327
5328
|
NoDataModule,
|
|
5328
5329
|
DirectivesModule,
|
|
5329
|
-
SmileyDialogModule
|
|
5330
|
+
SmileyDialogModule,
|
|
5331
|
+
DpDatePickerModule], exports: [CreateDashboardComponent] });
|
|
5330
5332
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
|
|
5331
|
-
// MarxEditorModule,
|
|
5332
5333
|
VcomplyEditorModule,
|
|
5333
5334
|
FormgroupModule,
|
|
5334
|
-
DpDatePickerModule,
|
|
5335
5335
|
FormsModule,
|
|
5336
5336
|
TooltipModule,
|
|
5337
5337
|
SelectModule,
|
|
@@ -5345,7 +5345,8 @@ class CreateDashboardModule {
|
|
|
5345
5345
|
SnackBarModule,
|
|
5346
5346
|
NoDataModule,
|
|
5347
5347
|
DirectivesModule,
|
|
5348
|
-
SmileyDialogModule
|
|
5348
|
+
SmileyDialogModule,
|
|
5349
|
+
DpDatePickerModule] });
|
|
5349
5350
|
}
|
|
5350
5351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardModule, decorators: [{
|
|
5351
5352
|
type: NgModule,
|
|
@@ -5363,10 +5364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5363
5364
|
],
|
|
5364
5365
|
imports: [
|
|
5365
5366
|
CommonModule,
|
|
5366
|
-
// MarxEditorModule,
|
|
5367
5367
|
VcomplyEditorModule,
|
|
5368
5368
|
FormgroupModule,
|
|
5369
|
-
DpDatePickerModule,
|
|
5370
5369
|
FormsModule,
|
|
5371
5370
|
TooltipModule,
|
|
5372
5371
|
SelectModule,
|
|
@@ -5381,6 +5380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5381
5380
|
NoDataModule,
|
|
5382
5381
|
DirectivesModule,
|
|
5383
5382
|
SmileyDialogModule,
|
|
5383
|
+
DpDatePickerModule,
|
|
5384
5384
|
],
|
|
5385
5385
|
exports: [CreateDashboardComponent],
|
|
5386
5386
|
}]
|