vc-create-dashboard 2.9.2 → 2.9.3

package/fesm2020/create-dashboard.mjs

@@ -13,12 +13,12 @@ import * as i10 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1$2 from 'ngx-lottie';
-import { LottieModule } from 'ngx-lottie';
 import { nanoid } from 'nanoid';
-import * as i1$3 from '@angular/platform-browser';
+import * as i1$2 from '@angular/platform-browser';
 import * as i3$1 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
+import * as i1$3 from 'ngx-lottie';
+import { LottieModule } from 'ngx-lottie';
 
 class CreateDashboardService$1 {
     constructor() { }
@@ -1518,10 +1518,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 vx-d-block\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n        <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons vx-fs-16\">&#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 vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n          </div>\r\n        <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n\r\n        <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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 vx-d-block\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n        <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons vx-fs-16\">&#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 vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n          </div>\r\n        <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n\r\n        <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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 vx-d-block\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n        <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons vx-fs-16\">&#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 vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n          </div>\r\n        <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n\r\n        <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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 vx-d-block\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n        <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons vx-fs-16\">&#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 vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n          </div>\r\n        <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n\r\n        <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n    </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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: [{
@@ -1539,19 +1539,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             }] } });
 
 class LoaderInlineComponent {
-    constructor() {
-        this.options = {
-            path: './assets/vLoader.json',
-        };
+    constructor(config) {
+        if (config) {
+            this.env = config.envConfig;
+        }
+        this.vLoader = this.env.vLoader;
     }
     ngOnInit() { }
 }
-LoaderInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
+LoaderInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderInlineComponent, selector: "app-loader-inline", ngImport: i0, template: "<div class=\"inline-loader\">\r\n  <img src=\"{{vLoader}}\" alt=\"\" />\r\n  <div class=\"loader-index\">\r\n    <div class=\"loader-index-circle\"></div>\r\n  </div>\r\n</div>", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'app-loader-inline', template: "<div class=\"inline-loader\">\r\n  <img src=\"{{vLoader}}\" alt=\"\" />\r\n  <div class=\"loader-index\">\r\n    <div class=\"loader-index-circle\"></div>\r\n  </div>\r\n</div>", styles: [".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;inset:0;background:transparent;z-index:9}.inline-loader img{width:45px;position:relative;z-index:2}.inline-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.inline-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class SnackBarComponent {
     constructor(snackbarService) {
@@ -4138,14 +4141,14 @@ class SafeHtmlPipe {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
 }
-SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
 
 // import { CsOptionComponent } from '../cs-option/cs-option.component';
 class CsSelectComponent$1 {
@@ -4996,24 +4999,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
         }] });
 
 class LoaderComponent {
-    constructor() {
-        this.options = {
-            path: './assets/vLoader.json',
-        };
+    constructor(config) {
+        if (config) {
+            this.env = config.envConfig;
+        }
+        this.vLoader = this.env.vLoader;
     }
     ngOnInit() { }
 }
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}\n"], dependencies: [{ kind: "component", type: i1$2.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] });
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"main-loader\">\r\n  <img src=\"{{vLoader}}\" alt=\"\" />\r\n  <div class=\"loader-index\">\r\n    <div class=\"loader-index-circle\"></div>\r\n  </div>\r\n</div>", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n  <ng-lottie width=\"300px\" height=\"300px\" [options]=\"options\"></ng-lottie>\r\n</div>", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'app-loader', template: "<div class=\"main-loader\">\r\n  <img src=\"{{vLoader}}\" alt=\"\" />\r\n  <div class=\"loader-index\">\r\n    <div class=\"loader-index-circle\"></div>\r\n  </div>\r\n</div>", styles: [".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;background:transparent;z-index:9}.main-loader img{width:45px;position:relative;z-index:2}.main-loader .loader-index{width:100%;height:100%;position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}.main-loader .loader-index-circle{background:#fff;width:65px;height:65px;border-radius:50%;border:4px solid transparent;border-top-color:#dbdbdb;animation:1.5s spin infinite linear}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class VLoaderModule {
 }
 VLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: VLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule, i1$2.LottieModule], exports: [LoaderComponent, LoaderInlineComponent] });
+VLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule, i1$3.LottieModule], exports: [LoaderComponent, LoaderInlineComponent] });
 VLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: VLoaderModule, imports: [CommonModule, LottieModule.forRoot({ player: playerFactory })] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: VLoaderModule, decorators: [{
             type: NgModule,
@@ -5091,7 +5097,7 @@ CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         SnackBarModule,
         NoDataModule,
         DirectivesModule,
-        SmileyDialogModule, i1$2.LottieModule], exports: [CreateDashboardComponent] });
+        SmileyDialogModule, i1$3.LottieModule], exports: [CreateDashboardComponent] });
 CreateDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
         // MarxEditorModule,
         VcomplyEditorModule,