vc-create-dashboard 2.8.23 → 2.8.25

package/fesm2015/create-dashboard.mjs

@@ -7,8 +7,8 @@ import { of, BehaviorSubject, Subject } from 'rxjs';
 import { map, retry, catchError } from 'rxjs/operators';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i8 from 'vcomply-editor';
-import { MarxEditorModule } from 'vcomply-editor';
+import * as i8 from '@vcomply/editor';
+import { VcomplyEditorModule } from '@vcomply/editor';
 import * as i10 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import * as i3 from '@angular/forms';
@@ -1531,10 +1531,10 @@ class ConfigureWidgetsComponent {
     }
 }
 ConfigureWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-ConfigureWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *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    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background: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:#FFFFFF;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:#FFFFFF}::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" }] });
+ConfigureWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *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    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background: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:#FFFFFF;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:#FFFFFF}::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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *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    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background: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:#FFFFFF;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:#FFFFFF}::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"] }]
+            args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *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    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#FFFFFF}::ng-deep .configure-widgets-head{height:44px;background:#FBFBFB;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:transparent;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background: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:#FFFFFF;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:#FFFFFF}::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"] }]
         }], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
                 type: Output
             }], closeConfigureWidgets: [{
@@ -2228,10 +2228,10 @@ class UserListComponent {
     }
 }
 UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</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        <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-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <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-pb-2 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        <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\">\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                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\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])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && 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                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0\">\r\n                        <div class=\"user-list-select vx-mb-2\">\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></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\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \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              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></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\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{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\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{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\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\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          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@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/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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::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 ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!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 - 15rem);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 - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::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 .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)}::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:#747576!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 - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: 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"] }] });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\">\r\n        <h3>Who can view this dashboard?</h3>\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-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n              <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-pb-2 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\">\r\n            <i class=\"icons\">&#xe90b;</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\">\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                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\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])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && 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                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0\">\r\n                        <div class=\"user-list-select vx-mb-2\">\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></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\r\n    </div>\r\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \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              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></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\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{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\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{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\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\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          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@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/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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::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 ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::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:.1875rem solid transparent;margin-right:2.5rem!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 - 15rem);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 - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::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 .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)}::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:#747576!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 - 286px)}::ng-deep .user-floating-bar{padding:0 16px 20px}::ng-deep .user-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</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        <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-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n                <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-pb-2 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        <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\">\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                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\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])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && 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                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0\">\r\n                        <div class=\"user-list-select vx-mb-2\">\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></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\r\n    </div>\r\n    <div class=\"floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \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              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></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\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{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\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{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\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\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          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@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/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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::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 ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!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 - 15rem);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 - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::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 .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)}::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:#747576!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 - 286px)}::ng-deep .floating-bar{padding:0 16px 20px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
+            args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\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-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n              <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-pb-2 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\">\r\n            <i class=\"icons\">&#xe90b;</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\">\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                <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\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])\"\r\n                            (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\"\r\n                            > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                    </li>\r\n                    <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n                </ul>\r\n\r\n                <app-no-data  *ngIf=\"!vLoader && 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                <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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\" [class.with-pagination]=\"total_group_pages>1\">\r\n                    <ng-container *ngIf=\"groups?.length > 0\">\r\n                        <div class=\"user-list-select vx-mb-2\">\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></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\r\n    </div>\r\n    <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-floating-bar-container\">\r\n          <div class=\"left\">\r\n              <div class=\"counter\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</div>\r\n              <div class=\"name\"> \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              <div class=\"counter group\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</div>\r\n              <div class=\"name\">\r\n              <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n              <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span></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\">\r\n                          <i class=\"icons\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\" >&#xe90d;</i>\r\n                          {{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\" >\r\n                          <i class=\"icons\" (click)=\"selectGroupElement(element)\" >&#xe90d;</i>\r\n                          {{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\">\r\n            <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n            <button [disabled]=\"false\" (click)=\"onSubmit()\" >Next <i class=\"icons\">&#xe91e;</i></button>\r\n          </div>\r\n        </div>\r\n      </div>\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          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: ["@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/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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .user-list{background:#FFFFFF}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:6px 0 18px}::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 ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 15rem);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 19rem)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 4px 0;margin-bottom:20px;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:9px!important;color:#747576!important;font-size:12px!important}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list 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 ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::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:.1875rem solid transparent;margin-right:2.5rem!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 - 15rem);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 - 16rem)}::ng-deep .user-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::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 .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)}::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:#747576!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 - 286px)}::ng-deep .user-floating-bar{padding:0 16px 20px}::ng-deep .user-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .user-floating-bar-container .left{display:flex;align-items:center;width:50%}::ng-deep .user-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3;border:1px solid #1e5dd3}::ng-deep .user-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .user-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .user-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .user-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .user-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .user-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .user-floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
                 type: Output
             }], saveSelectedUsers: [{
@@ -2402,10 +2402,10 @@ class ResponsibilityCenterComponent {
     }
 }
 ResponsibilityCenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ResponsibilityCenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\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\r\n                <li\r\n                    *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\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</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                \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    </div>\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>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::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}::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;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;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:14px;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:8px;color:#747576;position:relative;top:-1px}::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:14px;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:#4681ef;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:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+ResponsibilityCenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\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\r\n                <li\r\n                    *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\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</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                \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    </div>\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>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::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}::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;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;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:14px;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:8px;color:#747576;position:relative;top:-1px}::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:14px;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:#4681ef;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:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"responsibility-center-head\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\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\r\n                <li\r\n                    *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\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</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                \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    </div>\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>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::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}::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;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;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:14px;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:8px;color:#747576;position:relative;top:-1px}::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:14px;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:#4681ef;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:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"] }]
+            args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"responsibility-center-head\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\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\r\n                <li\r\n                    *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\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</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                \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    </div>\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>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .responsibility-center{background:#FFFFFF}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::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}::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;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;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:14px;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:8px;color:#747576;position:relative;top:-1px}::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:14px;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:#4681ef;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:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { saveSelectedList: [{
                 type: Output
             }], closeRcList: [{
@@ -2601,10 +2601,10 @@ class CategoriesComponent {
     }
 }
 CategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
+            args: [{ selector: 'app-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Program(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
@@ -2786,10 +2786,10 @@ class RiskCategoriesComponent {
     }
 }
 RiskCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RiskCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == '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=\"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=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (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=\"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=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</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=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [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\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+RiskCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == '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=\"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=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (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=\"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=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</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=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [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\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-risk-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == '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=\"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=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (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=\"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=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</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=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [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\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
+            args: [{ selector: 'app-risk-categories', template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == '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=\"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=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (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=\"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=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</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=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [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\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .category-list{background:#FFFFFF}::ng-deep .category-list-head{background:#FBFBFB;border-bottom:1px solid #F1F1F1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:transparent;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #DBDBDB;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#FFFFFF;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #BCBCBC;background:#FFFFFF;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
                 type: Input
             }], allCategories: [{
@@ -4003,10 +4003,10 @@ class CreateDashboardComponent {
     }
 }
 CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\">\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n                                                <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n                                                <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\"  *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n                                                    (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n                                                    {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n                                                    {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n                                        aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory && isManageRisk\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "marx-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\">\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n                                                <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n                                                <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\"  *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n                                                    (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n                                                    {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n                                                    {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n                                        aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory && isManageRisk\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::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:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::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 (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #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,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "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: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\">\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n                                                <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n                                                <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\"  *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n                                                    (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n                                                    {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n                                                    {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n                                        aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory && isManageRisk\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div id=\"onlyuserslist\" *ngIf=\"!groupsEnabled\" class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2 && !groupsEnabled\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <div class=\"user-group-chip-container\" *ngIf=\"groupsEnabled\">\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\">\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER(S)</span>\r\n                                                <button class=\"count user\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div class=\"chip-inner\">\r\n                                            <div class=\"chip\" *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" >\r\n                                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span>\r\n                                                <button class=\"count\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\"  *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\"\r\n                                                    (click)=\"remove('whoCanView',data)\" >&#xe90d;</i>\r\n                                                    {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\">\r\n                                                    <i class=\"icons\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i>\r\n                                                    {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">PROGRAM</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput vx-d-flex vx-align-center\"\r\n                                        aria-placeholder=\"Select the Program(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory && isManageRisk\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::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:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::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 (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:unset;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #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,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
         }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{
@@ -4769,10 +4769,10 @@ class FormGroupComponent {
     }
 }
 FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <marx-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></marx-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\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 src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\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\">&#xe90d;</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\">&#xe9ba;</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 src=\"./assets/images/responsibility-center.svg\" alt=\"\">\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 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 src=\"./assets/images/category.svg\" alt=\"\">\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 class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></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 src=\"./assets/images/category.svg\" alt=\"\">\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 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()\"></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 src=\"./assets/images/who.svg\" alt=\"\">\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 (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\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 src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></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 src=\"./assets/images/send-resolution.svg\" alt=\"\">\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 <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\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 class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\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/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{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 #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .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{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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 #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::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: "marx-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></vcomply-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\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 src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\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\">&#xe90d;</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\">&#xe9ba;</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 src=\"./assets/images/responsibility-center.svg\" alt=\"\">\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 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 src=\"./assets/images/category.svg\" alt=\"\">\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 class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></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 src=\"./assets/images/category.svg\" alt=\"\">\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 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()\"></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 src=\"./assets/images/who.svg\" alt=\"\">\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 (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\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 src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></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 src=\"./assets/images/send-resolution.svg\" alt=\"\">\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 <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\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 class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\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/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 (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::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: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-group', template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n    <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <marx-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></marx-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\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 src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\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\">&#xe90d;</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\">&#xe9ba;</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 src=\"./assets/images/responsibility-center.svg\" alt=\"\">\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 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 src=\"./assets/images/category.svg\" alt=\"\">\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 class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></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 src=\"./assets/images/category.svg\" alt=\"\">\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 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()\"></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 src=\"./assets/images/who.svg\" alt=\"\">\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 (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\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 src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></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 src=\"./assets/images/send-resolution.svg\" alt=\"\">\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 <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\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 class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\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/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{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 #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5d08}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .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{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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 #1e5d08}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
+            args: [{ selector: 'app-form-group', template: "<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n    <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></vcomply-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\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 src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\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\">&#xe90d;</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\">&#xe9ba;</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 src=\"./assets/images/responsibility-center.svg\" alt=\"\">\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 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 src=\"./assets/images/category.svg\" alt=\"\">\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 class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Program that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></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 src=\"./assets/images/category.svg\" alt=\"\">\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 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()\"></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 src=\"./assets/images/who.svg\" alt=\"\">\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 (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\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 src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></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 src=\"./assets/images/send-resolution.svg\" alt=\"\">\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 <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\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 class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\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/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 (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::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:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form 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,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"] }]
         }], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { openCategoryList: [{
                 type: Output
             }], openResponsibilityCenterList: [{
@@ -4942,9 +4942,7 @@ class CreateDashboardModule {
     static forRoot(environmentConfig) {
         return {
             ngModule: CreateDashboardModule,
-            providers: [
-                { provide: Configurations, useValue: environmentConfig }
-            ]
+            providers: [{ provide: Configurations, useValue: environmentConfig }],
         };
     }
 }
@@ -4958,7 +4956,8 @@ CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FrequencyComponent,
         FilterPipe,
         TextCountPipe], imports: [CommonModule,
-        MarxEditorModule,
+        // MarxEditorModule,
+        VcomplyEditorModule,
         FormgroupModule,
         DpDatePickerModule,
         FormsModule,
@@ -4976,7 +4975,8 @@ CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DirectivesModule,
         SmileyDialogModule], exports: [CreateDashboardComponent] });
 CreateDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
-        MarxEditorModule,
+        // MarxEditorModule,
+        VcomplyEditorModule,
         FormgroupModule,
         DpDatePickerModule,
         FormsModule,
@@ -5009,7 +5009,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        MarxEditorModule,
+                        // MarxEditorModule,
+                        VcomplyEditorModule,
                         FormgroupModule,
                         DpDatePickerModule,
                         FormsModule,
@@ -5025,11 +5026,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         SnackBarModule,
                         NoDataModule,
                         DirectivesModule,
-                        SmileyDialogModule
+                        SmileyDialogModule,
                     ],
-                    exports: [
-                        CreateDashboardComponent
-                    ]
+                    exports: [CreateDashboardComponent],
                 }]
         }] });