vc-create-dashboard 2.9.3 → 2.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/create-dashboard-container/categories/categories.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/configure-widgets/configure-widgets.module.mjs +4 -4
- package/esm2020/lib/create-dashboard-container/create-dashboard.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/create-dashboard.module.mjs +7 -15
- package/esm2020/lib/create-dashboard-container/directives/directives.module.mjs +4 -4
- package/esm2020/lib/create-dashboard-container/directives/scroll-in-view.directive.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/form-group/form-group.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/frequency/frequency.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/pipes/filter.pipe.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/pipes/search.pipe.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/pipes/text-count.pipe.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/responsibility-center/responsibility-center.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/risk-categories/risk-categories.component.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/services/auth.service.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/services/configure-widgets.service.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/services/create-dashboard.service.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/services/pagination.service.mjs +3 -3
- package/esm2020/lib/create-dashboard-container/user-list/user-list.component.mjs +3 -3
- package/esm2020/lib/create-dashboard.service.mjs +3 -3
- package/esm2020/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.mjs +3 -3
- package/esm2020/lib/ui-kit/dashboard-footer/dashboard-footer.module.mjs +4 -4
- package/esm2020/lib/ui-kit/dialog/dialog.component.mjs +3 -3
- package/esm2020/lib/ui-kit/dialog/dialog.module.mjs +4 -4
- package/esm2020/lib/ui-kit/dialog/dialog.service.mjs +3 -3
- package/esm2020/lib/ui-kit/dialog/insertion.directive.mjs +3 -3
- package/esm2020/lib/ui-kit/floating-bar/floating-bar.component.mjs +3 -3
- package/esm2020/lib/ui-kit/floating-bar/floating-bar.module.mjs +4 -4
- package/esm2020/lib/ui-kit/formgroup/click-outside.directive.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/cs-radio/cs-radio.component.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/cs-radio-group/cs-radio-group.component.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/cs-select/cs-select.component.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/cs-switch/cs-switch.component.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/formgroup.module.mjs +4 -4
- package/esm2020/lib/ui-kit/formgroup/pipes/pascal.pipe.mjs +3 -3
- package/esm2020/lib/ui-kit/formgroup/pipes/searchMultiSelect.pipe.mjs +3 -3
- package/esm2020/lib/ui-kit/no-data/no-data.component.mjs +3 -3
- package/esm2020/lib/ui-kit/no-data/no-data.module.mjs +4 -4
- package/esm2020/lib/ui-kit/pagination/pagination.component.mjs +3 -3
- package/esm2020/lib/ui-kit/pagination/pagination.module.mjs +4 -4
- package/esm2020/lib/ui-kit/popover/popover.component.mjs +3 -3
- package/esm2020/lib/ui-kit/popover/popover.directive.mjs +3 -3
- package/esm2020/lib/ui-kit/popover/popover.module.mjs +4 -4
- package/esm2020/lib/ui-kit/popover/popover.service.mjs +3 -3
- package/esm2020/lib/ui-kit/select/cs-option/cs-option.component.mjs +3 -3
- package/esm2020/lib/ui-kit/select/cs-select/cs-select.component.mjs +3 -3
- package/esm2020/lib/ui-kit/select/safe-html.pipe.mjs +3 -3
- package/esm2020/lib/ui-kit/select/select.module.mjs +4 -4
- package/esm2020/lib/ui-kit/services/cs-select.service.mjs +3 -3
- package/esm2020/lib/ui-kit/smiley-dialog/smiley-dialog.component.mjs +3 -3
- package/esm2020/lib/ui-kit/smiley-dialog/smiley-dialog.module.mjs +4 -4
- package/esm2020/lib/ui-kit/snack-bar/snack-bar/snack-bar.component.mjs +3 -3
- package/esm2020/lib/ui-kit/snack-bar/snack-bar.module.mjs +4 -4
- package/esm2020/lib/ui-kit/snack-bar/snack-bar.service.mjs +3 -3
- package/esm2020/lib/ui-kit/tooltip/tooltip.directive.mjs +3 -3
- package/esm2020/lib/ui-kit/tooltip/tooltip.module.mjs +4 -4
- package/esm2020/lib/ui-kit/v-loader/loader/loader.component.mjs +3 -3
- package/esm2020/lib/ui-kit/v-loader/loader-inline/loader-inline.component.mjs +3 -3
- package/esm2020/lib/ui-kit/v-loader/v-loader.module.mjs +6 -9
- package/fesm2015/create-dashboard.mjs +199 -207
- package/fesm2015/create-dashboard.mjs.map +1 -1
- package/fesm2020/create-dashboard.mjs +199 -207
- package/fesm2020/create-dashboard.mjs.map +1 -1
- package/lib/create-dashboard-container/create-dashboard.module.d.ts +1 -3
- package/lib/ui-kit/v-loader/v-loader.module.d.ts +1 -2
- package/package.json +2 -2
|
@@ -17,15 +17,13 @@ import { nanoid } from 'nanoid';
|
|
|
17
17
|
import * as i1$2 from '@angular/platform-browser';
|
|
18
18
|
import * as i3$1 from '@angular/router';
|
|
19
19
|
import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
|
|
20
|
-
import * as i1$3 from 'ngx-lottie';
|
|
21
|
-
import { LottieModule } from 'ngx-lottie';
|
|
22
20
|
|
|
23
21
|
class CreateDashboardService$1 {
|
|
24
22
|
constructor() { }
|
|
25
23
|
}
|
|
26
|
-
CreateDashboardService$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
27
|
-
CreateDashboardService$1.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
24
|
+
CreateDashboardService$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService$1, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
25
|
+
CreateDashboardService$1.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService$1, providedIn: 'root' });
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService$1, decorators: [{
|
|
29
27
|
type: Injectable,
|
|
30
28
|
args: [{
|
|
31
29
|
providedIn: 'root',
|
|
@@ -40,9 +38,9 @@ class TextCountPipe {
|
|
|
40
38
|
return span.textContent?.length || span.innerText.length;
|
|
41
39
|
}
|
|
42
40
|
}
|
|
43
|
-
TextCountPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
44
|
-
TextCountPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
41
|
+
TextCountPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextCountPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
42
|
+
TextCountPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TextCountPipe, name: "textCount" });
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextCountPipe, decorators: [{
|
|
46
44
|
type: Pipe,
|
|
47
45
|
args: [{
|
|
48
46
|
name: 'textCount'
|
|
@@ -69,9 +67,9 @@ class AuthService {
|
|
|
69
67
|
}
|
|
70
68
|
}
|
|
71
69
|
}
|
|
72
|
-
AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
73
|
-
AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
70
|
+
AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpClient }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
71
|
+
AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, providedIn: 'root' });
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, decorators: [{
|
|
75
73
|
type: Injectable,
|
|
76
74
|
args: [{
|
|
77
75
|
providedIn: 'root'
|
|
@@ -183,9 +181,9 @@ class CreateDashboardService {
|
|
|
183
181
|
return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(retry(2));
|
|
184
182
|
}
|
|
185
183
|
}
|
|
186
|
-
CreateDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
187
|
-
CreateDashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
184
|
+
CreateDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
185
|
+
CreateDashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService, providedIn: 'root' });
|
|
186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardService, decorators: [{
|
|
189
187
|
type: Injectable,
|
|
190
188
|
args: [{
|
|
191
189
|
providedIn: 'root'
|
|
@@ -211,9 +209,9 @@ class PaginationService {
|
|
|
211
209
|
this.searchValue = '';
|
|
212
210
|
}
|
|
213
211
|
}
|
|
214
|
-
PaginationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
215
|
-
PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
216
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
212
|
+
PaginationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
213
|
+
PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationService, providedIn: 'root' });
|
|
214
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationService, decorators: [{
|
|
217
215
|
type: Injectable,
|
|
218
216
|
args: [{
|
|
219
217
|
providedIn: 'root'
|
|
@@ -232,9 +230,9 @@ class SnackBarService {
|
|
|
232
230
|
});
|
|
233
231
|
}
|
|
234
232
|
}
|
|
235
|
-
SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
236
|
-
SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
233
|
+
SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
234
|
+
SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarService, providedIn: 'root' });
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarService, decorators: [{
|
|
238
236
|
type: Injectable,
|
|
239
237
|
args: [{
|
|
240
238
|
providedIn: 'root',
|
|
@@ -247,9 +245,9 @@ class PopoverService {
|
|
|
247
245
|
console.log(this.popoverHeight);
|
|
248
246
|
}
|
|
249
247
|
}
|
|
250
|
-
PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
251
|
-
PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
248
|
+
PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
249
|
+
PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverService, providedIn: 'root' });
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverService, decorators: [{
|
|
253
251
|
type: Injectable,
|
|
254
252
|
args: [{
|
|
255
253
|
providedIn: 'root',
|
|
@@ -462,9 +460,9 @@ class ConfigureWidgetsService {
|
|
|
462
460
|
}
|
|
463
461
|
}
|
|
464
462
|
}
|
|
465
|
-
ConfigureWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
466
|
-
ConfigureWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
463
|
+
ConfigureWidgetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
464
|
+
ConfigureWidgetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsService, providedIn: 'root' });
|
|
465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsService, decorators: [{
|
|
468
466
|
type: Injectable,
|
|
469
467
|
args: [{
|
|
470
468
|
providedIn: 'root'
|
|
@@ -482,9 +480,9 @@ class CsRadioComponent {
|
|
|
482
480
|
this.checkedEvent.emit(evt);
|
|
483
481
|
}
|
|
484
482
|
}
|
|
485
|
-
CsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
486
|
-
CsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
483
|
+
CsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
484
|
+
CsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsRadioComponent, selector: "app-cs-radio", inputs: { disabled: "disabled", readonly: "readonly", name: "name", checked: "checked", value: "value" }, outputs: { checkedEvent: "checkedEvent" }, ngImport: i0, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n <span class=\"radio\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#ffffff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] });
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsRadioComponent, decorators: [{
|
|
488
486
|
type: Component,
|
|
489
487
|
args: [{ selector: 'app-cs-radio', template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n <span class=\"radio\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#ffffff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
|
|
490
488
|
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
|
|
@@ -615,9 +613,9 @@ class ToolTipDirective {
|
|
|
615
613
|
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
|
|
616
614
|
}
|
|
617
615
|
}
|
|
618
|
-
ToolTipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
619
|
-
ToolTipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.
|
|
620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
616
|
+
ToolTipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
617
|
+
ToolTipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToolTipDirective, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 });
|
|
618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipDirective, decorators: [{
|
|
621
619
|
type: Directive,
|
|
622
620
|
args: [{
|
|
623
621
|
selector: '[arTooltip]',
|
|
@@ -775,9 +773,9 @@ class PopoverComponent {
|
|
|
775
773
|
// }, 10);
|
|
776
774
|
}
|
|
777
775
|
}
|
|
778
|
-
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
779
|
-
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
776
|
+
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
|
|
777
|
+
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopoverComponent, selector: "app-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\r\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
781
779
|
type: Component,
|
|
782
780
|
args: [{ selector: 'app-popover', template: "<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\r\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:initial;position:fixed;inset:0}\n"] }]
|
|
783
781
|
}], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { dontCloseonClick: [{
|
|
@@ -859,9 +857,9 @@ class PopoverDirective {
|
|
|
859
857
|
}, 10);
|
|
860
858
|
}
|
|
861
859
|
}
|
|
862
|
-
PopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
863
|
-
PopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.
|
|
864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
860
|
+
PopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
861
|
+
PopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PopoverDirective, selector: "[appPopover]", inputs: { refrence: "refrence", placement: "placement" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
|
|
862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverDirective, decorators: [{
|
|
865
863
|
type: Directive,
|
|
866
864
|
args: [{
|
|
867
865
|
selector: '[appPopover]',
|
|
@@ -899,9 +897,9 @@ class FloatingBarComponent {
|
|
|
899
897
|
this.deleteEvent.emit(index);
|
|
900
898
|
}
|
|
901
899
|
}
|
|
902
|
-
FloatingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
903
|
-
FloatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FloatingBarComponent, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\r\n </div>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\r\n </div>\r\n \r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\"></i>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.lib-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
|
|
904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
900
|
+
FloatingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
901
|
+
FloatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FloatingBarComponent, selector: "floating-bar", inputs: { text: "text", frequencyMessage: "frequencyMessage", singleCategory: "singleCategory", selectedData: "selectedData" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\r\n </div>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\r\n </div>\r\n \r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\"></i>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.lib-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
|
|
902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarComponent, decorators: [{
|
|
905
903
|
type: Component,
|
|
906
904
|
args: [{ selector: 'floating-bar', template: "<div class=\"lib-floating-bar-container\">\r\n <div class=\"lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"singleCategory\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{singleCategory}}</span>\r\n </div>\r\n </div>\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\" *ngIf=\"selectedData.length\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"deleteSelected(selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"selectedData[0]?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0]?.title}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"countPopup.popover()\" placement=\"left\" *ngIf=\"selectedData?.length > 1\">+{{selectedData?.length - 1}}</button>\r\n </div>\r\n \r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n <span class=\"vx-fs-12 vx-paragraph-txt\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"lib-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons cross-icon vx-mr-2\" (click)=\"deleteSelected(data)\"></i>{{data?.title}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button class=\"save-btn\" (click)=\"submitFloatingBar()\">Save</button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";.lib-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}.lib-floating-bar .left .value{color:#747576;font-size:12px}.lib-floating-bar .left .value strong{color:#161b2f;font-weight:500}.lib-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px;min-width:62px}.lib-floating-bar .right button.cancel-btn{background:transparent!important;color:#eb2424!important}.lib-floating-bar-action-list{width:220px}.lib-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.lib-floating-bar-action-list ul.action-item{display:block}.lib-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.lib-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.lib-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.lib-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.lib-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:8px}.lib-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.lib-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.lib-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.lib-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.lib-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.lib-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.lib-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.lib-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.lib-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.lib-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.lib-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.lib-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.lib-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
|
|
907
905
|
}], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { cancelEvent: [{
|
|
@@ -929,9 +927,9 @@ class CsCheckboxComponent {
|
|
|
929
927
|
this.ngValueChange.emit(this.ngValue);
|
|
930
928
|
}
|
|
931
929
|
}
|
|
932
|
-
CsCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
933
|
-
CsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
930
|
+
CsCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
931
|
+
CsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n <span class=\"checkbox\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
|
|
932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsCheckboxComponent, decorators: [{
|
|
935
933
|
type: Component,
|
|
936
934
|
args: [{ selector: 'app-cs-checkbox', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n <span class=\"checkbox\">\r\n <span class=\"inner\"></span>\r\n </span>\r\n <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
|
|
937
935
|
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
|
|
@@ -954,9 +952,9 @@ class NoDataComponent {
|
|
|
954
952
|
this.buttonAction.emit(button);
|
|
955
953
|
}
|
|
956
954
|
}
|
|
957
|
-
NoDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
958
|
-
NoDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
959
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
955
|
+
NoDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
956
|
+
NoDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NoDataComponent, selector: "app-no-data", inputs: { action: "action", noDataImage: "noDataImage", noDataText: "noDataText", noDataButton: "noDataButton", noDataSecButton: "noDataSecButton", altText: "altText", smallButton: "smallButton", buttonIcon: "buttonIcon", iconClass: "iconClass" }, outputs: { buttonAction: "buttonAction" }, ngImport: i0, template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#ffffff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:300px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NoDataComponent, decorators: [{
|
|
960
958
|
type: Component,
|
|
961
959
|
args: [{ selector: 'app-no-data', template: "<div class=\"no-data-wrapper\">\r\n <div class=\"no-data-container\">\r\n <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n <div class=\"button-row\" *ngFor=\"let button of action\">\r\n <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n [class.small]=\"smallButton\"></button>\r\n <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n [innerHTML]=\"button?.buttonText\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#ffffff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:300px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}\n"] }]
|
|
962
960
|
}], ctorParameters: function () { return []; }, propDecorators: { action: [{
|
|
@@ -995,9 +993,9 @@ class SearchPipe {
|
|
|
995
993
|
});
|
|
996
994
|
}
|
|
997
995
|
}
|
|
998
|
-
SearchPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
999
|
-
SearchPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
1000
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
996
|
+
SearchPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
997
|
+
SearchPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SearchPipe, name: "search" });
|
|
998
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchPipe, decorators: [{
|
|
1001
999
|
type: Pipe,
|
|
1002
1000
|
args: [{
|
|
1003
1001
|
name: 'search'
|
|
@@ -1517,9 +1515,9 @@ class ConfigureWidgetsComponent {
|
|
|
1517
1515
|
});
|
|
1518
1516
|
}
|
|
1519
1517
|
}
|
|
1520
|
-
ConfigureWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1521
|
-
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\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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" }] });
|
|
1522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1518
|
+
ConfigureWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsComponent, deps: [{ token: DialogRef }, { token: ConfigureWidgetsService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1519
|
+
ConfigureWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: { selectedWidgetsData: "selectedWidgetsData", displayedWidgets: "displayedWidgets", showRisk: "showRisk", showCompliance: "showCompliance", mode: "mode" }, outputs: { widgetsDataModified: "widgetsDataModified", closeConfigureWidgets: "closeConfigureWidgets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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" }] });
|
|
1520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsComponent, decorators: [{
|
|
1523
1521
|
type: Component,
|
|
1524
1522
|
args: [{ selector: 'app-configure-widgets', template: "<div class=\"configure-widgets vx-d-block\" *ngIf=\"showWidgets\">\r\n <div class=\"configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt\">Configure Widgets</div>\r\n <button class=\"configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center\" (click)=\"closeConfigureDashboard()\">\r\n <i class=\"icons vx-fs-16\"></i> Back\r\n </button>\r\n </div>\r\n <div class=\"configure-widgets-body\">\r\n <div class=\"configure-widgets-tab\">\r\n <ul>\r\n <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n </ul>\r\n </div>\r\n <div class=\"configure-widgets-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n </div>\r\n <div class=\"configure-widgets-list vx-d-flex vx-flex-wrap\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n <label class=\"block\">\r\n <input type=\"checkbox\" [checked]=\"widget.value\"\r\n (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n <div class=\"check-icon\">\r\n <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"configure-widgets-item-head\">\r\n <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n </div>\r\n <div class=\"configure-widgets-item-body\">\r\n <div class=\"image-wrapper\">\r\n <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n </div>\r\n <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n </app-cs-checkbox>\r\n </ng-container>\r\n \r\n </div>\r\n\r\n </div>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- No Data Image -->\r\n\r\n </div>\r\n <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n\r\n <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\" [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .configure-widgets{width:calc(100vw - 3rem);height:100vh;margin-left:3rem;background:#fff}@media screen and (max-width: 1280px){::ng-deep .configure-widgets{width:100vw;margin-left:0}}::ng-deep .configure-widgets-head{height:2.75rem;background:#FBFBFB;border-bottom:1px solid #F1F1F1}::ng-deep .configure-widgets-back{border:none;outline:none;background:transparent}::ng-deep .configure-widgets-back i{margin-right:6px}::ng-deep .configure-widgets-body{padding:2rem;position:relative;height:calc(100vh - 2.75rem)}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 13.875rem)!important}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 8px;display:flex;border-bottom:1px solid #DBDBDB}::ng-deep .configure-widgets-tab ul li{list-style:none;display:flex;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:transparent;padding:0 0 8px;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:28px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #DBDBDB;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{margin:0 -1rem .5rem;height:calc(100vh - 15.5rem);overflow:hidden;overflow-y:auto}::ng-deep .configure-widgets-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .configure-widgets-item{width:50%;padding:0 16px;margin-bottom:32px}::ng-deep .configure-widgets-item .block{background:#F8F8F8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34AA44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:transparent;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1E5DD3}::ng-deep .configure-widgets-item-button.remove{background:#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"] }]
|
|
1525
1523
|
}], ctorParameters: function () { return [{ type: DialogRef }, { type: ConfigureWidgetsService }, { type: SnackBarService }]; }, propDecorators: { widgetsDataModified: [{
|
|
@@ -1547,9 +1545,9 @@ class LoaderInlineComponent {
|
|
|
1547
1545
|
}
|
|
1548
1546
|
ngOnInit() { }
|
|
1549
1547
|
}
|
|
1550
|
-
LoaderInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1551
|
-
LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
1552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1548
|
+
LoaderInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderInlineComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1549
|
+
LoaderInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] });
|
|
1550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderInlineComponent, decorators: [{
|
|
1553
1551
|
type: Component,
|
|
1554
1552
|
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"] }]
|
|
1555
1553
|
}], ctorParameters: function () { return [{ type: Configurations, decorators: [{
|
|
@@ -1590,9 +1588,9 @@ class SnackBarComponent {
|
|
|
1590
1588
|
ngOnDestroy() {
|
|
1591
1589
|
}
|
|
1592
1590
|
}
|
|
1593
|
-
SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1594
|
-
SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
1595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1591
|
+
SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1592
|
+
SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SnackBarComponent, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"snackbar\" *ngIf=\"show\">\r\n <div class=\"snackbar-inner\">\r\n <div class=\"snackbarText\">\r\n <!--  -->\r\n <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \r\n <span [innerHTML]=\"message\">{{ message }}</span>\r\n </div>\r\n <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarComponent, decorators: [{
|
|
1596
1594
|
type: Component,
|
|
1597
1595
|
args: [{ selector: 'app-snack-bar', template: "<div class=\"snackbar\" *ngIf=\"show\">\r\n <div class=\"snackbar-inner\">\r\n <div class=\"snackbarText\">\r\n <!--  -->\r\n <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> \r\n <span [innerHTML]=\"message\">{{ message }}</span>\r\n </div>\r\n <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snackbar.white{background-color:#fff;color:#000;z-index:20}.snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snackbar .snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snackbar .snackbar-inner .snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snackbar .snackbar-inner .snackbarText i{background:#f1f1f1;color:#f0b819;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snackbar .snackbar-inner .snackbarText i.success{color:#34aa44}.snackbar .snackbar-inner .snackbarText i.warning{color:#f0b819}.snackbar .snackbar-inner .snackbarText i.info{color:#1e5dd3}.snackbar .snackbar-inner .snackbarText i.alert,.snackbar .snackbar-inner .snackbarText i.error{color:#d93b41}.snackbar .snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snackbar .snackbar-inner button span{color:#1e5dd3;font-weight:500}.snackbar .snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
1598
1596
|
}], ctorParameters: function () { return [{ type: SnackBarService }]; } });
|
|
@@ -1619,9 +1617,9 @@ class ScrollInViewDirective {
|
|
|
1619
1617
|
}
|
|
1620
1618
|
}
|
|
1621
1619
|
}
|
|
1622
|
-
ScrollInViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1623
|
-
ScrollInViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.
|
|
1624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1620
|
+
ScrollInViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScrollInViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1621
|
+
ScrollInViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: { appScrollInView: "appScrollInView" }, usesOnChanges: true, ngImport: i0 });
|
|
1622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScrollInViewDirective, decorators: [{
|
|
1625
1623
|
type: Directive,
|
|
1626
1624
|
args: [{
|
|
1627
1625
|
selector: '[appScrollInView]'
|
|
@@ -1657,9 +1655,9 @@ class SmileyDialogComponent {
|
|
|
1657
1655
|
this.closeSmiley.emit();
|
|
1658
1656
|
}
|
|
1659
1657
|
}
|
|
1660
|
-
SmileyDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1661
|
-
SmileyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
1662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1658
|
+
SmileyDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1659
|
+
SmileyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: { message: "message", autoClose: "autoClose", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- active -->\r\n<div class=\"smiley-popup active\">\r\n <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div class=\"smiley-container\">\r\n <div class=\"smiley\">\r\n <!-- active deactive -->\r\n <div class=\"smiley-circle active\">\r\n <div class=\"smiley-circle-inner\">\r\n <div class=\"eyes\">\r\n <div class=\"eye\"></div>\r\n <div class=\"eye\"></div>\r\n </div>\r\n <div class=\"mouth\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <h3>{{ message }}</h3>\r\n <div class=\"successSmilyButton\">\r\n <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\r\n {{ button?.buttonText }}\r\n </button>\r\n </div>\r\n <!-- <div class=\"successSmilyButton\"> -->\r\n <!-- <button>White Button</button>\r\n <button class=\"blue-btn\">Blue Button</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</div>\r\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogComponent, decorators: [{
|
|
1663
1661
|
type: Component,
|
|
1664
1662
|
args: [{ selector: 'app-smiley-dialog', template: "<!-- active -->\r\n<div class=\"smiley-popup active\">\r\n <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <div class=\"smiley-container\">\r\n <div class=\"smiley\">\r\n <!-- active deactive -->\r\n <div class=\"smiley-circle active\">\r\n <div class=\"smiley-circle-inner\">\r\n <div class=\"eyes\">\r\n <div class=\"eye\"></div>\r\n <div class=\"eye\"></div>\r\n </div>\r\n <div class=\"mouth\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <h3>{{ message }}</h3>\r\n <div class=\"successSmilyButton\">\r\n <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\r\n {{ button?.buttonText }}\r\n </button>\r\n </div>\r\n <!-- <div class=\"successSmilyButton\"> -->\r\n <!-- <button>White Button</button>\r\n <button class=\"blue-btn\">Blue Button</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</div>\r\n", styles: [".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;inset:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:transparent;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-radius:100px 100px 0 0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
|
|
1665
1663
|
}], ctorParameters: function () { return []; }, propDecorators: { message: [{
|
|
@@ -1707,9 +1705,9 @@ class DashboardFooterComponent {
|
|
|
1707
1705
|
this.deleteEvent.emit(element);
|
|
1708
1706
|
}
|
|
1709
1707
|
}
|
|
1710
|
-
DashboardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1711
|
-
DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails", userButtonColor: "userButtonColor" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\r\n </div>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\"></i> {{element[footerDetails.displayElementKey]}}\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 class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\"></i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
|
|
1712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1708
|
+
DashboardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1709
|
+
DashboardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: { footerDetails: "footerDetails", userButtonColor: "userButtonColor" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\r\n </div>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\"></i> {{element[footerDetails.displayElementKey]}}\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 class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\"></i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterComponent, decorators: [{
|
|
1713
1711
|
type: Component,
|
|
1714
1712
|
args: [{ selector: 'app-dashboard-footer', template: "<div class=\"dashboard-floating-bar-container\">\r\n <div class=\"dashboard-floating-bar vx-d-flex vx-align-center\" [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\" [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n </div>\r\n\r\n <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\" (click)=\"deleteSelected(footerDetails.selectedData[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"footerDetails.selectedData[0][footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n <button *ngIf=\"footerDetails.selectedData.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [ngClass]=\"userButtonColor\" appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length - 1}}</button>\r\n </div>\r\n <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">{{footerDetails.singularText}}</span>\r\n <span class=\"value vx-ml-2\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">{{footerDetails.pluralText}}</span>\r\n </ng-container>\r\n <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n <div class=\"dashboard-floating-bar-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element[footerDetails.displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\" (click)=\"deleteSelected(element)\"></i> {{element[footerDetails.displayElementKey]}}\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 class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\" (click)=\"cancelFloatingBar()\">Cancel</button>\r\n <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\" (click)=\"submitFloatingBar()\">Update</button> -->\r\n <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\" (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\"></i></button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";::ng-deep .dashboard-floating-bar{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .dashboard-floating-bar .left span.select-item{border-radius:2px;box-shadow:0 2px 6px #4681ef20}::ng-deep .dashboard-floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}::ng-deep .dashboard-floating-bar .left span.select-item i{font-size:6px;cursor:pointer}::ng-deep .dashboard-floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}::ng-deep .dashboard-floating-bar .left .value{color:#747576;font-size:12px}::ng-deep .dashboard-floating-bar .left .value strong{color:#161b2f;font-weight:500}::ng-deep .dashboard-floating-bar .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .dashboard-floating-bar .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep .dashboard-floating-bar .right button.disabled{background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .dashboard-floating-bar-action-list{width:220px}::ng-deep .dashboard-floating-bar-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .dashboard-floating-bar-action-list ul.action-item{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}::ng-deep .dashboard-floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .dashboard-floating-bar-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .dashboard-floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}\n"] }]
|
|
1715
1713
|
}], ctorParameters: function () { return []; }, propDecorators: { cancelEvent: [{
|
|
@@ -1832,9 +1830,9 @@ class PaginationComponent {
|
|
|
1832
1830
|
}
|
|
1833
1831
|
}
|
|
1834
1832
|
}
|
|
1835
|
-
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
1836
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
1837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
1833
|
+
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1834
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PaginationComponent, selector: "app-pagination", inputs: { totalPages: "totalPages", limit: "limit", totalList: "totalList" }, outputs: { paginationFilter: "paginationFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\"></i></button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\"></i>{{page!='...'?page : ''}}\r\n </button>\r\n </li>\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\"></i></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.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+li{margin-left:4px}.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:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;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;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#F1F1F1;color:#bcbcbc!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"] }] });
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1838
1836
|
type: Component,
|
|
1839
1837
|
args: [{ selector: 'app-pagination', template: "<div class=\"pagination-box\">\r\n <ul>\r\n <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><i class=\"icons vx-fs-10\"></i></button></li>\r\n <li *ngFor=\"let page of paginationArray\">\r\n <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n <i *ngIf=\"page=='...'\" class=\"icons\"></i>{{page!='...'?page : ''}}\r\n </button>\r\n </li>\r\n <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\"><i class=\"icons vx-fs-10\"></i></button></li>\r\n </ul>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-box{margin-bottom:12px}.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+li{margin-left:4px}.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:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;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;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;background:#F1F1F1;color:#bcbcbc!important}\n"] }]
|
|
1840
1838
|
}], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { totalPages: [{
|
|
@@ -2221,9 +2219,9 @@ class UserListComponent {
|
|
|
2221
2219
|
});
|
|
2222
2220
|
}
|
|
2223
2221
|
}
|
|
2224
|
-
UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
2225
|
-
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 vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\"></i> {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\"></i> {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
|
|
2226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
2222
|
+
UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserListComponent, deps: [{ token: PaginationService }, { token: CreateDashboardService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2223
|
+
UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserListComponent, selector: "app-user-list", inputs: { selectionType: "selectionType", listDetails: "listDetails", totalPages: "totalPages", limit: "limit", totalList: "totalList", feature: "feature", totalgroupscount: "totalgroupscount" }, outputs: { closeUserList: "closeUserList", saveSelectedUsers: "saveSelectedUsers" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\"></i> {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\"></i> {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalPages", "limit", "totalList"], outputs: ["paginationFilter"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }] });
|
|
2224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserListComponent, decorators: [{
|
|
2227
2225
|
type: Component,
|
|
2228
2226
|
args: [{ selector: 'app-user-list', template: "<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Who can view this dashboard?</div>\r\n </div>\r\n <div class=\"user-list-body\">\r\n <div class=\"user-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalList}}</span></button>\r\n <button id=\"switchtab\" (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\" >USER GROUPS <span id=\"groupscount\" class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{totalgroups}}</span></button>\r\n </div>\r\n\r\n <div class=\"user-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"totalPages>1\">\r\n <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n </div>\r\n </div>\r\n <div class=\"user-list-body-top\" *ngIf=\"searchList.length !== 0\">\r\n <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-of-user\">\r\n <div class=\"selection-list vx-mb-4\" [class.with-group]=\"groupsEnabled\" [class.with-noData]=\"searchList.length == 0\" [class.with-pagination]=\"totalPages>1 && searchList.length>1\">\r\n <ul *ngIf=\"searchList.length !== 0\">\r\n <li *ngFor=\"let data of searchList; let i = index\">\r\n <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\" (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n </li>\r\n </ul>\r\n\r\n <app-no-data *ngIf=\"!vLoader && searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\">\r\n <ng-container *ngIf=\"(groupdata) as groups \">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"true\">\r\n <div class=\"pagination-box\" *ngIf=\"total_group_pages>1\"> \r\n <app-pagination (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"total_group_pages\" [totalList]=\"totalgroups\"></app-pagination>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"true\">\r\n <div class=\"user-list-mid vx-mb-4\" [class.with-pagination]=\"total_group_pages>1\">\r\n <ng-container *ngIf=\"groups?.length > 0\">\r\n <div class=\"user-list-select vx-mb-4\">\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"!searchValue && groups.length>1\" [ngValue]=\"selectedgroupList.length == totalgroups\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n <app-cs-checkbox [disabled]=\"false\" *ngIf=\"searchValue && groups.length>1\" [ngValue]=\"checkSelectAllGroups()\" (ngValueChange)=\"selectAllsearchgroups($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"user-list-item\">\r\n <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let data of groups; let i = index\">\r\n <app-cs-checkbox (ngValueChange)=\"selectGroupElement(data)\" [disabled]=\"false\" [ngValue]=\"selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])\">\r\n <div class=\"user-name vx-d-flex vx-align-center\"> \r\n <div class=\"group-name\" [arTooltip]=\"data[listDetails.displayGroupKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">{{data[listDetails.displayGroupKey]}}</div>\r\n <span id=\"usersofgroup\" class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2\">{{data[\"associatedUsers\"].length}} {{data[\"associatedUsers\"].length > 1 ? 'USERS' :'USER'}}</span>\r\n </div>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groups?.length == 0 && !vLoaderGroups\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n </ng-container>\r\n <app-loader-inline *ngIf=\"vLoaderGroups\"></app-loader-inline>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <div class=\"user-floating-bar\" *ngIf=\"groupsEnabled\">\r\n <div class=\"user-floating-bar-container vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"left vx-d-flex vx-align-center\">\r\n <button class=\"counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1\" *ngIf=\"selectedList?.length\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{selectedList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\"> \r\n <span *ngIf=\"selectedList?.length === 1\">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedList?.length > 1\">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <button class=\"counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1\" *ngIf=\"selectedgroupList?.length\" appPopover (click)=\"groupCount.popover()\" placement=\"left\">{{selectedgroupList?.length}}</button>\r\n <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\r\n <span *ngIf=\"selectedgroupList?.length === 1\">User Group selected</span>\r\n <span *ngIf=\"selectedgroupList?.length > 1\">User Groups selected</span>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectElement(element)\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(element?.member_id)\"></i> {{element.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n \r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedgroupList\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"element?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"selectGroupElement(element)\"></i> {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n \r\n <div class=\"right vx-d-flex vx-align-center\">\r\n <button class=\"cancel\" (click)=\"closeUserList.emit()\">Cancel</button>\r\n <button [disabled]=\"false\" (click)=\"onSubmit()\">Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"user-list-footer\" *ngIf=\"!groupsEnabled\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeUserList.emit(); paginationService.reset();\"\r\n (deleteEvent) =\"selectElement($event)\"\r\n (submitEvent)=\"onSubmit()\"\r\n [userButtonColor]=\"'greenBg'\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .user-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .user-list-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 16px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value{margin-left:9px!important}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body .selection-list{height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .user-list-body .selection-list::-webkit-scrollbar-track{background:transparent}::ng-deep .user-list-body .selection-list.with-pagination{height:calc(100vh - 18rem)}::ng-deep .user-list-body .selection-list.with-group{height:calc(100vh - 18.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-pagination{height:calc(100vh - 20.1rem)}::ng-deep .user-list-body .selection-list.with-group.with-noData{height:calc(100vh - 16.1rem)}::ng-deep .user-list-body .selection-list ul{padding:0;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-body .selection-list ul li{width:50%;padding:0 20px 4px 0;margin-bottom:12px;list-style:none}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox,::ng-deep .user-list-body .selection-list ul li app-cs-radio{display:flex}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label,::ng-deep .user-list-body .selection-list ul li app-cs-radio label{width:100%}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap;margin-left:8px!important;color:#161b2f!important;font-size:12px!important}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body .selection-list ul li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body .selection-list ul li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-body .pagination-box app-pagination .pagination-box{margin-bottom:.5rem!important}::ng-deep .user-list-body .list-of-user app-no-data .no-data-wrapper{height:calc(100vh - 16.125rem)}::ng-deep .user-list-search{position:relative}::ng-deep .user-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-list-search input:focus{border-color:#1e5dd3}::ng-deep .user-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:1.75rem!important;padding-bottom:6px!important}::ng-deep .user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-list-tab button.active{pointer-events:none}::ng-deep .user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .user-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.6rem);overflow:auto;padding-right:.75rem}::ng-deep .user-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-mid.with-pagination{height:calc(100vh - 17.6rem)}::ng-deep .user-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-list-mid .user-list-select app-cs-checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate{display:flex}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkbox,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item .checkmark,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-list-mid .user-list-select app-cs-checkbox .checkbox-item span.value .user-name,::ng-deep .user-list-mid .user-list-select app-cs-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-list-mid .user-list-item ul li{width:50%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox{width:calc(100% - 4.5rem);display:flex}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 40px)}::ng-deep .user-list-mid .user-list-item ul li app-cs-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 15.625rem)}::ng-deep .user-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;position:relative;background:#FFFFFF;width:100%}::ng-deep .user-floating-bar-container .left .counter{background:#34AA44;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}::ng-deep .user-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .user-floating-bar-container .right{display:flex;align-items:center}::ng-deep .user-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .user-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .user-floating-bar-container .right button:disabled{filter:unset;background:#F1F1F1!important;color:#747576!important;opacity:1;pointer-events:none}::ng-deep .user-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}\n"] }]
|
|
2229
2227
|
}], ctorParameters: function () { return [{ type: PaginationService }, { type: CreateDashboardService }]; }, propDecorators: { closeUserList: [{
|
|
@@ -2265,9 +2263,9 @@ class FilterPipe {
|
|
|
2265
2263
|
}
|
|
2266
2264
|
}
|
|
2267
2265
|
}
|
|
2268
|
-
FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
2269
|
-
FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
2270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
2266
|
+
FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2267
|
+
FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FilterPipe, name: "filter" });
|
|
2268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterPipe, decorators: [{
|
|
2271
2269
|
type: Pipe,
|
|
2272
2270
|
args: [{
|
|
2273
2271
|
name: 'filter'
|
|
@@ -2392,9 +2390,9 @@ class ResponsibilityCenterComponent {
|
|
|
2392
2390
|
this.closeRcList.emit();
|
|
2393
2391
|
}
|
|
2394
2392
|
}
|
|
2395
|
-
ResponsibilityCenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
2396
|
-
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 vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\"></i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
2393
|
+
ResponsibilityCenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResponsibilityCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2394
|
+
ResponsibilityCenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: { responsibilityCentersList: "responsibilityCentersList", selectedResponsibilityCenters: "selectedResponsibilityCenters", rcIdKey: "rcIdKey", radioSelection: "radioSelection" }, outputs: { saveSelectedList: "saveSelectedList", closeRcList: "closeRcList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\"></i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ResponsibilityCenterComponent, decorators: [{
|
|
2398
2396
|
type: Component,
|
|
2399
2397
|
args: [{ selector: 'app-responsibility-center', template: "<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibility Center(s)</div>\r\n </div>\r\n <div class=\"responsibility-center-body\">\r\n <div class=\"responsibility-center-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n </div>\r\n\r\n <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let rc of searchList; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n <ul class=\"responsibility-center-list-name\">\r\n <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n <i class=\"icons\" *ngIf=\"j !== 0\"></i>\r\n {{entity}}\r\n <!-- <span class=\"name\">{{entity}}</span> -->\r\n </li> \r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length == 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <div class=\"responsibility-center-footer\">\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"closeRcList.emit()\"\r\n (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .responsibility-center{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .responsibility-center-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .responsibility-center-body{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:1rem}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important;font-size:12px!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;height:calc(100vh - 256px);margin-bottom:16px;overflow:hidden;overflow-y:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background:transparent}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:4px;color:#747576;position:relative}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:12px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#34aa44}::ng-deep .responsibility-center-search{position:relative}::ng-deep .responsibility-center-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3}::ng-deep .responsibility-center-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}\n"] }]
|
|
2400
2398
|
}], ctorParameters: function () { return []; }, propDecorators: { saveSelectedList: [{
|
|
@@ -2590,9 +2588,9 @@ class CategoriesComponent {
|
|
|
2590
2588
|
this.closeCategoriesList.emit();
|
|
2591
2589
|
}
|
|
2592
2590
|
}
|
|
2593
|
-
CategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
2594
|
-
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-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
2591
|
+
CategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2592
|
+
CategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CategoriesComponent, selector: "app-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CategoriesComponent, decorators: [{
|
|
2596
2594
|
type: Component,
|
|
2597
2595
|
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-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Program(s)</span>\r\n </div>\r\n <div class=\"category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n {{categoryList?.regulations?.selectedList?.length}}\r\n {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n {{categoryList?.standards?.selectedList?.length}}\r\n {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\" (click)=\"activeTab = 'internalControls'\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n {{categoryList?.internalControls?.selectedList?.length}}\r\n {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n </div>\r\n <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Program\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">{{entity}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .category-list-search{position:relative}::ng-deep .category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-search input:focus{border-color:#1e5dd3}::ng-deep .category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .category-list-item ul.category-list-item-ul{padding:0;margin:0}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:12px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}\n"] }]
|
|
2598
2596
|
}], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
|
|
@@ -2775,9 +2773,9 @@ class RiskCategoriesComponent {
|
|
|
2775
2773
|
this.closeCategoriesList.emit();
|
|
2776
2774
|
}
|
|
2777
2775
|
}
|
|
2778
|
-
RiskCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
2779
|
-
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=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
2776
|
+
RiskCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RiskCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2777
|
+
RiskCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, ngImport: i0, template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "buttonIcon", "iconClass"], outputs: ["buttonAction"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
|
|
2778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RiskCategoriesComponent, decorators: [{
|
|
2781
2779
|
type: Component,
|
|
2782
2780
|
args: [{ selector: 'app-risk-categories', template: "<div class=\"risk-category-list\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <span class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risk Category(s)</span>\r\n </div>\r\n <div class=\"risk-category-list-mid\">\r\n <div class=\"vx-d-flex vx-mb-2\">\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n <div class=\"left\">\r\n <label>strategic</label>\r\n <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n {{categoryList?.strategic?.selectedList?.length}}\r\n {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n <div class=\"left\">\r\n <label>operational</label>\r\n <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n {{categoryList?.operational?.selectedList?.length}}\r\n {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n <div class=\"left\">\r\n <label>compliance</label>\r\n <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n {{categoryList?.compliance?.selectedList?.length}}\r\n {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n </div>\r\n <div class=\"risk-category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n {{categoryList?.others?.selectedList?.length}}\r\n {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"risk-category-list-search vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n </div>\r\n\r\n <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"risk-category-list-item vx-mb-4\" [class.with-selectAll]=\"searchList.length > 1\" *ngIf=\"searchList.length > 0\">\r\n <ul class=\"risk-category-list-item-ul vx-m-0 vx-p-0\">\r\n <li class=\"vx-mb-4\" *ngFor=\"let category of searchList\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n <ul class=\"categories\">\r\n <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n </ul>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n <app-no-data *ngIf=\"searchList.length == 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n </app-no-data>\r\n </ng-container>\r\n\r\n <app-dashboard-footer \r\n [footerDetails] =\"footerDetails\"\r\n (cancelEvent)=\"close()\"\r\n (deleteEvent) =\"deleteEvent($event)\"\r\n (submitEvent)=\"save()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .risk-category-list{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .risk-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-list-card{box-shadow:0 0 2px #00000029;border-radius:2px;height:56px;padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}::ng-deep .risk-category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .risk-category-list-card .left label{color:#747576;font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;width:100%}::ng-deep .risk-category-list-card .left p{color:#161b2f;font-size:11px;font-weight:600;line-height:16px;margin:0}::ng-deep .risk-category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;line-height:32px;justify-content:center;align-items:center;padding:0 4px;pointer-events:none}::ng-deep .risk-category-list-card.active{box-shadow:0 3px 12px #1e5dd326;z-index:1;pointer-events:none}::ng-deep .risk-category-list-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .risk-category-list-card+.risk-category-list-card{margin-left:4px}::ng-deep .risk-category-list-mid{height:calc(100vh - 2.75rem);padding:2rem;position:relative}::ng-deep .risk-category-list-mid::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-mid .select-all{display:flex;padding-bottom:1rem}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important;font-size:12px!important}::ng-deep .risk-category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .risk-category-list-mid app-no-data .no-data-wrapper{height:calc(100vh - 260px)}::ng-deep .risk-category-list-search{position:relative}::ng-deep .risk-category-list-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-list-search input:focus{border-color:#1e5dd3}::ng-deep .risk-category-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .risk-category-list-item{list-style-type:none;display:block;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .risk-category-list-item::-webkit-scrollbar-track{background:transparent}::ng-deep .risk-category-list-item.with-selectAll{height:calc(100vh - 320px)}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul{padding:0;margin:0}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li{list-style:none}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox{display:flex}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label{width:100%}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value{width:auto;justify-content:flex-start}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .risk-category-list-item ul.risk-category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li{display:block;padding:0 16px 0 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#161b2f}\n"] }]
|
|
2783
2781
|
}], ctorParameters: function () { return []; }, propDecorators: { categoryList: [{
|
|
@@ -3076,9 +3074,9 @@ class FrequencyComponent {
|
|
|
3076
3074
|
}
|
|
3077
3075
|
}
|
|
3078
3076
|
}
|
|
3079
|
-
FrequencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
3080
|
-
FrequencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
|
|
3081
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
3077
|
+
FrequencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3078
|
+
FrequencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FrequencyComponent, selector: "app-frequency", inputs: { savedFrequencyTab: "savedFrequencyTab", savedFrequencies: "savedFrequencies", selectedDate: "selectedDate" }, outputs: { closeFrequencyPopup: "closeFrequencyPopup", saveFrequency: "saveFrequency" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DashboardFooterComponent, selector: "app-dashboard-footer", inputs: ["footerDetails", "userButtonColor"], outputs: ["cancelEvent", "submitEvent", "deleteEvent"] }] });
|
|
3079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyComponent, decorators: [{
|
|
3082
3080
|
type: Component,
|
|
3083
3081
|
args: [{ selector: 'app-frequency', template: "<div class=\"create-frequency\" [class.animate-slideInRight]=\"animation\">\r\n <div class=\"create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Frequency</div>\r\n </div>\r\n <div class=\"create-frequency-body vx-pl-4 vx-pr-4\">\r\n <div class=\"create-frequency-body-inner\">\r\n <div class=\"create-frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"create-frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n </ul>\r\n </div>\r\n <div class=\"create-frequency-tab-body vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Email Reminder Frequency:</div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let day of dayNames; let dayIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let month of monthNames; let monthIndex = index\">\r\n <app-cs-checkbox (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n <ng-container *ngIf=\"showRadio\">\r\n <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Day</div>\r\n <input type=\"number\" (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">of</div>\r\n </div>\r\n <div class=\"frequency-checkbox vx-d-flex vx-align-center\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let quarter of quarters, let quarterIndex = index\">\r\n <app-cs-radio (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n </div>\r\n </div>\r\n </ng-container> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"create-frequency-footer\">\r\n <app-dashboard-footer \r\n [footerDetails]=\"footerDetails\"\r\n (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n (submitEvent)=\"submitFrequency()\"\r\n ></app-dashboard-footer>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .create-frequency{background:#FFFFFF;border-right:1px solid #F1F1F1;position:fixed;inset:0 500px 0 0}::ng-deep .create-frequency-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto;width:calc(100% - 2.5rem)}::ng-deep .create-frequency-body::-webkit-scrollbar-track{background:transparent}::ng-deep .create-frequency-body-inner{width:54.5rem;margin:0 auto}@media screen and (min-width: 1366px){::ng-deep .create-frequency-body-inner{width:auto}}::ng-deep .create-frequency-tab-head{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .create-frequency-tab-head ul{padding:0;margin:0}::ng-deep .create-frequency-tab-head ul.navigation{display:flex}::ng-deep .create-frequency-tab-head ul.navigation li{list-style:none;padding:0;margin:0 1.5rem 0 0;display:flex;justify-content:center}::ng-deep .create-frequency-tab-head ul.navigation li button{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;font-size:11px;font-weight:500;color:#747576;line-height:1.5rem;position:relative;text-transform:uppercase;cursor:pointer;padding:0}::ng-deep .create-frequency-tab-head ul.navigation li button.active{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .create-frequency-tab-body .checkbox-list{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top{padding:12px;border-bottom:1px solid #F1F1F1}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-top input.countNum{-webkit-appearance:textfield;-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox{background:#fff;border-radius:.25rem}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}@media screen and (max-width: 1280px){::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item{padding:0 .5rem!important}}::ng-deep .create-frequency-tab-body .checkbox-list .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .create-frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .create-frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#161b2f!important;font-weight:400!important}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:first-of-type,::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(2),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(3),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(4),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(5),::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .create-frequency-tab-body .checkbox-list.month .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .create-frequency-footer{padding:0 2rem}\n"] }]
|
|
3084
3082
|
}], ctorParameters: function () { return [{ type: SnackBarService }]; }, propDecorators: { savedFrequencyTab: [{
|
|
@@ -4105,9 +4103,9 @@ class CreateDashboardComponent {
|
|
|
4105
4103
|
});
|
|
4106
4104
|
}
|
|
4107
4105
|
}
|
|
4108
|
-
CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4109
|
-
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\" [class.tablet-width]=\"activeSelector && activeSelector!=='name'\">\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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 <!-- Dashboard Name -->\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\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n \r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\"></i> {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\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 *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\"></i> {{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\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" ></i> {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\"></i> {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\"></i> {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\"></i> {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div 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\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be 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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (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\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [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\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n </div>\r\n </div>\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\" [class.hide]=\"activeSelector && activeSelector!=='name'\">\r\n <i class=\"icons\"></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\"></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 *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#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 input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,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{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#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:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#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}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\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" }] });
|
|
4110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4106
|
+
CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
4107
|
+
CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\" [class.tablet-width]=\"activeSelector && activeSelector!=='name'\">\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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 <!-- Dashboard Name -->\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\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n \r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\"></i> {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\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 *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\"></i> {{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\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" ></i> {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\"></i> {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\"></i> {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\"></i> {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div 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\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be 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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (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\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [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\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n </div>\r\n </div>\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\" [class.hide]=\"activeSelector && activeSelector!=='name'\">\r\n <i class=\"icons\"></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\"></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 *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#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 input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,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{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#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:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#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}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\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" }] });
|
|
4108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardComponent, decorators: [{
|
|
4111
4109
|
type: Component,
|
|
4112
4110
|
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\" [class.tablet-width]=\"activeSelector && activeSelector!=='name'\">\r\n <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\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 <!-- Dashboard Name -->\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\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div class=\"vx-input-group\">\r\n <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n \r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n <div class=\"vx-input-group vx-mt-2\">\r\n <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n </div>\r\n\r\n <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #userList [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\"></i> {{ user?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\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 *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n </div>\r\n\r\n <app-popover #userCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\"></i> {{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\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" ></i> {{data.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n <app-popover #rcList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\"></i> {{ rc?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Program -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\"></i> {{ rCategory?.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n <div class=\"image\">\r\n <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n <app-popover #riskList [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\"></i> {{ riskCategory?.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Display Criteria -->\r\n <div 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\" 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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeframe -->\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-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be 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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [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\"></i>\r\n <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (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\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Email Summary -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [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\">\r\n <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n </div>\r\n\r\n <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-block\">\r\n <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n </div>\r\n </div>\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\" [class.hide]=\"activeSelector && activeSelector!=='name'\">\r\n <i class=\"icons\"></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\"></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 *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#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 input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,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{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#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:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#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}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
|
|
4113
4111
|
}], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
|
|
@@ -4141,9 +4139,9 @@ class SafeHtmlPipe {
|
|
|
4141
4139
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
4142
4140
|
}
|
|
4143
4141
|
}
|
|
4144
|
-
SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4145
|
-
SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
4146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4142
|
+
SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
4143
|
+
SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
|
|
4144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
|
|
4147
4145
|
type: Pipe,
|
|
4148
4146
|
args: [{
|
|
4149
4147
|
name: 'safeHtml'
|
|
@@ -4203,15 +4201,15 @@ class CsSelectComponent$1 {
|
|
|
4203
4201
|
this.dropdownToggle = false;
|
|
4204
4202
|
}
|
|
4205
4203
|
}
|
|
4206
|
-
CsSelectComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4207
|
-
CsSelectComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4204
|
+
CsSelectComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4205
|
+
CsSelectComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsSelectComponent$1, selector: "cs-select", inputs: { dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", isRequired: "isRequired", placeholder: "placeholder" }, providers: [
|
|
4208
4206
|
{
|
|
4209
4207
|
provide: NG_VALUE_ACCESSOR,
|
|
4210
4208
|
useExisting: forwardRef(() => CsSelectComponent$1),
|
|
4211
4209
|
multi: true,
|
|
4212
4210
|
},
|
|
4213
4211
|
], viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"selection-wrap\">\r\n <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\r\n {{ dropdownLabel }}\r\n <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\r\n <span class=\"required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <div class=\"input-group\">\r\n <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\r\n </div>\r\n <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\r\n <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\r\n (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\r\n [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\r\n <ng-content select=\"cs-option\"></ng-content>\r\n </div>\r\n</div>", styles: ["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#ffffff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid transparent;border-left:4px solid transparent;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;inset:0;background:transparent;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#ffffff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
|
|
4214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectComponent$1, decorators: [{
|
|
4215
4213
|
type: Component,
|
|
4216
4214
|
args: [{ selector: 'cs-select', providers: [
|
|
4217
4215
|
{
|
|
@@ -4237,9 +4235,9 @@ class CsSelectService {
|
|
|
4237
4235
|
constructor() {
|
|
4238
4236
|
}
|
|
4239
4237
|
}
|
|
4240
|
-
CsSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4241
|
-
CsSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
4242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4238
|
+
CsSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4239
|
+
CsSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectService, providedIn: 'root' });
|
|
4240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectService, decorators: [{
|
|
4243
4241
|
type: Injectable,
|
|
4244
4242
|
args: [{
|
|
4245
4243
|
providedIn: 'root'
|
|
@@ -4264,9 +4262,9 @@ class CsOptionComponent {
|
|
|
4264
4262
|
this.csSelect.writeValue(this.value);
|
|
4265
4263
|
}
|
|
4266
4264
|
}
|
|
4267
|
-
CsOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4268
|
-
CsOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4265
|
+
CsOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsOptionComponent, deps: [{ token: CsSelectComponent$1 }, { token: CsSelectService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4266
|
+
CsOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsOptionComponent, selector: "cs-option", inputs: { value: "value", color: "color" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["options"], descendants: true }], ngImport: i0, template: "<div class=\"list\">\r\n <label>\r\n <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\r\n <span class=\"value\" #options>\r\n <ng-content></ng-content>\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] });
|
|
4267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsOptionComponent, decorators: [{
|
|
4270
4268
|
type: Component,
|
|
4271
4269
|
args: [{ selector: 'cs-option', template: "<div class=\"list\">\r\n <label>\r\n <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\r\n <span class=\"value\" #options>\r\n <ng-content></ng-content>\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}\n"] }]
|
|
4272
4270
|
}], ctorParameters: function () { return [{ type: CsSelectComponent$1 }, { type: CsSelectService }]; }, propDecorators: { value: [{
|
|
@@ -4280,10 +4278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4280
4278
|
|
|
4281
4279
|
class SelectModule {
|
|
4282
4280
|
}
|
|
4283
|
-
SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4284
|
-
SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4285
|
-
SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4281
|
+
SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4282
|
+
SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SelectModule, declarations: [CsSelectComponent$1, CsOptionComponent, SafeHtmlPipe], imports: [FormsModule, CommonModule], exports: [CsSelectComponent$1, CsOptionComponent] });
|
|
4283
|
+
SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectModule, imports: [FormsModule, CommonModule] });
|
|
4284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectModule, decorators: [{
|
|
4287
4285
|
type: NgModule,
|
|
4288
4286
|
args: [{
|
|
4289
4287
|
declarations: [CsSelectComponent$1, CsOptionComponent, SafeHtmlPipe],
|
|
@@ -4294,10 +4292,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4294
4292
|
|
|
4295
4293
|
class PaginationModule {
|
|
4296
4294
|
}
|
|
4297
|
-
PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4298
|
-
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4299
|
-
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4295
|
+
PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4296
|
+
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
|
|
4297
|
+
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationModule, imports: [CommonModule] });
|
|
4298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationModule, decorators: [{
|
|
4301
4299
|
type: NgModule,
|
|
4302
4300
|
args: [{
|
|
4303
4301
|
declarations: [PaginationComponent],
|
|
@@ -4317,9 +4315,9 @@ class CsSwitchComponent {
|
|
|
4317
4315
|
this.ngValueChange.emit(this.ngValue);
|
|
4318
4316
|
}
|
|
4319
4317
|
}
|
|
4320
|
-
CsSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4321
|
-
CsSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4318
|
+
CsSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4319
|
+
CsSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n <!-- [class.large]=\"large\" -->\r\n <span class=\"value\">\r\n <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <i class=\"vc-icons\"></i>\r\n </span> -->\r\n </span>\r\n <!-- [class.last]=\"last\" -->\r\n <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n <span\r\n class=\"switch\"\r\n *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n [arTooltip]=\"tooltipMessage\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#ffffff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
|
|
4320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSwitchComponent, decorators: [{
|
|
4323
4321
|
type: Component,
|
|
4324
4322
|
args: [{ selector: 'app-cs-switch', template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n <!-- [class.large]=\"large\" -->\r\n <span class=\"value\">\r\n <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <i class=\"vc-icons\"></i>\r\n </span> -->\r\n </span>\r\n <!-- [class.last]=\"last\" -->\r\n <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n <span\r\n class=\"switch\"\r\n *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n [arTooltip]=\"tooltipMessage\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n <span class=\"switch-box\">\r\n <span class=\"switch-ball\"></span>\r\n </span>\r\n </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#ffffff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
|
|
4325
4323
|
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
|
|
@@ -4340,9 +4338,9 @@ class CsRadioGroupComponent {
|
|
|
4340
4338
|
constructor() { }
|
|
4341
4339
|
ngOnInit() { }
|
|
4342
4340
|
}
|
|
4343
|
-
CsRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4344
|
-
CsRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4341
|
+
CsRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4342
|
+
CsRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsRadioGroupComponent, selector: "app-cs-radio-group", ngImport: i0, template: "<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n", styles: [""], dependencies: [{ kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }] });
|
|
4343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsRadioGroupComponent, decorators: [{
|
|
4346
4344
|
type: Component,
|
|
4347
4345
|
args: [{ selector: 'app-cs-radio-group', template: "<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n" }]
|
|
4348
4346
|
}], ctorParameters: function () { return []; } });
|
|
@@ -4359,9 +4357,9 @@ class ClickOutsideDirective {
|
|
|
4359
4357
|
}
|
|
4360
4358
|
}
|
|
4361
4359
|
}
|
|
4362
|
-
ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4363
|
-
ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.
|
|
4364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4360
|
+
ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4361
|
+
ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onMouseEnter($event.target)" } }, ngImport: i0 });
|
|
4362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
4365
4363
|
type: Directive,
|
|
4366
4364
|
args: [{
|
|
4367
4365
|
selector: '[clickOutside]',
|
|
@@ -4382,9 +4380,9 @@ class PascalPipe {
|
|
|
4382
4380
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
4383
4381
|
}
|
|
4384
4382
|
}
|
|
4385
|
-
PascalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4386
|
-
PascalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
4387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4383
|
+
PascalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PascalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
4384
|
+
PascalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PascalPipe, name: "pascal" });
|
|
4385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PascalPipe, decorators: [{
|
|
4388
4386
|
type: Pipe,
|
|
4389
4387
|
args: [{
|
|
4390
4388
|
name: 'pascal',
|
|
@@ -4443,9 +4441,9 @@ class CsSelectComponent {
|
|
|
4443
4441
|
this.dropdownOption = false;
|
|
4444
4442
|
}
|
|
4445
4443
|
}
|
|
4446
|
-
CsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4447
|
-
CsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4448
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4444
|
+
CsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4445
|
+
CsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CsSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n <label *ngIf=\"dropdownLabel != undefined\">\r\n {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n >\r\n <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n <input\r\n type=\"text\"\r\n [class.line]=\"stylex\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedValue | pascal\"\r\n readonly\r\n (click)=\"openDropdown($event)\"\r\n (keyup.enter)=\"openDropdown($event)\"\r\n (keyup.arrowup)=\"openDropdown($event)\"\r\n (keyup.arrowdown)=\"openDropdown($event)\"\r\n *ngIf=\"!colorProperty\"\r\n />\r\n <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\r\n <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\r\n </span>\r\n <span class=\"arrow\" [class.line]=\"stylex\">\r\n <i class=\"risk-icons\"></i>\r\n </span>\r\n <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && !colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label>\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\r\n </label>\r\n </li>\r\n </ul>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label class=\"colors\">\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"displayProperty && displayProperty !== ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data[displayProperty] }}</span\r\n >\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"!displayProperty || displayProperty === ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data }}</span\r\n >\r\n </label>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#ffffff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#ffffff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }] });
|
|
4446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CsSelectComponent, decorators: [{
|
|
4449
4447
|
type: Component,
|
|
4450
4448
|
args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n <label *ngIf=\"dropdownLabel != undefined\">\r\n {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n >\r\n <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n <input\r\n type=\"text\"\r\n [class.line]=\"stylex\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"selectedValue | pascal\"\r\n readonly\r\n (click)=\"openDropdown($event)\"\r\n (keyup.enter)=\"openDropdown($event)\"\r\n (keyup.arrowup)=\"openDropdown($event)\"\r\n (keyup.arrowdown)=\"openDropdown($event)\"\r\n *ngIf=\"!colorProperty\"\r\n />\r\n <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\r\n <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\r\n </span>\r\n <span class=\"arrow\" [class.line]=\"stylex\">\r\n <i class=\"risk-icons\"></i>\r\n </span>\r\n <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && !colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label>\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\r\n <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\r\n </label>\r\n </li>\r\n </ul>\r\n <ul\r\n class=\"list-of-option\"\r\n *ngIf=\"dropdownOption === true && colorProperty\"\r\n #optionList\r\n (keyup.Escape)=\"closeDropdown()\"\r\n [style.top.px]=\"getTop\"\r\n [style.left.px]=\"getLeft\"\r\n [style.min-width.px]=\"getWidth\"\r\n [style.max-width.px]=\"maxWidth\"\r\n [class.active]=\"activeDoropdown\"\r\n >\r\n <li *ngFor=\"let data of dataList\">\r\n <label class=\"colors\">\r\n <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"displayProperty && displayProperty !== ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data[displayProperty] }}</span\r\n >\r\n <span\r\n (click)=\"selectOption(data)\"\r\n *ngIf=\"!displayProperty || displayProperty === ''\"\r\n class=\"value\"\r\n [ngStyle]=\"{ color: data.segment_color }\"\r\n [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n >{{ data }}</span\r\n >\r\n </label>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#ffffff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#ffffff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
|
|
4451
4449
|
}], propDecorators: { dataList: [{
|
|
@@ -4488,10 +4486,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4488
4486
|
|
|
4489
4487
|
class TooltipModule {
|
|
4490
4488
|
}
|
|
4491
|
-
TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4492
|
-
TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4493
|
-
TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4489
|
+
TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4490
|
+
TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] });
|
|
4491
|
+
TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
4492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, decorators: [{
|
|
4495
4493
|
type: NgModule,
|
|
4496
4494
|
args: [{
|
|
4497
4495
|
declarations: [ToolTipDirective],
|
|
@@ -4513,9 +4511,9 @@ class SearchMultiSelectPipe {
|
|
|
4513
4511
|
return value;
|
|
4514
4512
|
}
|
|
4515
4513
|
}
|
|
4516
|
-
SearchMultiSelectPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4517
|
-
SearchMultiSelectPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.
|
|
4518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4514
|
+
SearchMultiSelectPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchMultiSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
4515
|
+
SearchMultiSelectPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SearchMultiSelectPipe, name: "searchMultiSelect" });
|
|
4516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchMultiSelectPipe, decorators: [{
|
|
4519
4517
|
type: Pipe,
|
|
4520
4518
|
args: [{
|
|
4521
4519
|
name: 'searchMultiSelect',
|
|
@@ -4524,8 +4522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4524
4522
|
|
|
4525
4523
|
class FormgroupModule {
|
|
4526
4524
|
}
|
|
4527
|
-
FormgroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4528
|
-
FormgroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4525
|
+
FormgroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormgroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4526
|
+
FormgroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FormgroupModule, declarations: [CsCheckboxComponent,
|
|
4529
4527
|
CsRadioComponent,
|
|
4530
4528
|
CsSwitchComponent,
|
|
4531
4529
|
CsRadioGroupComponent,
|
|
@@ -4538,8 +4536,8 @@ FormgroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
4538
4536
|
CsRadioGroupComponent,
|
|
4539
4537
|
CsSelectComponent,
|
|
4540
4538
|
SearchMultiSelectPipe] });
|
|
4541
|
-
FormgroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4539
|
+
FormgroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormgroupModule, imports: [CommonModule, FormsModule, TooltipModule] });
|
|
4540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormgroupModule, decorators: [{
|
|
4543
4541
|
type: NgModule,
|
|
4544
4542
|
args: [{
|
|
4545
4543
|
declarations: [
|
|
@@ -4566,10 +4564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4566
4564
|
|
|
4567
4565
|
class PopoverModule {
|
|
4568
4566
|
}
|
|
4569
|
-
PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4570
|
-
PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4571
|
-
PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4567
|
+
PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4568
|
+
PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PopoverModule, declarations: [PopoverComponent, PopoverDirective], imports: [CommonModule], exports: [PopoverComponent, PopoverDirective] });
|
|
4569
|
+
PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverModule, providers: [PopoverService], imports: [CommonModule] });
|
|
4570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverModule, decorators: [{
|
|
4573
4571
|
type: NgModule,
|
|
4574
4572
|
args: [{
|
|
4575
4573
|
declarations: [PopoverComponent, PopoverDirective],
|
|
@@ -4581,14 +4579,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4581
4579
|
|
|
4582
4580
|
class DashboardFooterModule {
|
|
4583
4581
|
}
|
|
4584
|
-
DashboardFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4585
|
-
DashboardFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4582
|
+
DashboardFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4583
|
+
DashboardFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterModule, declarations: [DashboardFooterComponent], imports: [CommonModule,
|
|
4586
4584
|
PopoverModule,
|
|
4587
4585
|
TooltipModule], exports: [DashboardFooterComponent] });
|
|
4588
|
-
DashboardFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4586
|
+
DashboardFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterModule, imports: [CommonModule,
|
|
4589
4587
|
PopoverModule,
|
|
4590
4588
|
TooltipModule] });
|
|
4591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardFooterModule, decorators: [{
|
|
4592
4590
|
type: NgModule,
|
|
4593
4591
|
args: [{
|
|
4594
4592
|
declarations: [
|
|
@@ -4610,9 +4608,9 @@ class InsertionDirective {
|
|
|
4610
4608
|
this.viewContainerRef = viewContainerRef;
|
|
4611
4609
|
}
|
|
4612
4610
|
}
|
|
4613
|
-
InsertionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4614
|
-
InsertionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.
|
|
4615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4611
|
+
InsertionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InsertionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4612
|
+
InsertionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: InsertionDirective, selector: "[appInsertion]", ngImport: i0 });
|
|
4613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InsertionDirective, decorators: [{
|
|
4616
4614
|
type: Directive,
|
|
4617
4615
|
args: [{
|
|
4618
4616
|
selector: '[appInsertion]',
|
|
@@ -4687,9 +4685,9 @@ class DialogComponent {
|
|
|
4687
4685
|
document.body.style.overflow = 'auto';
|
|
4688
4686
|
}
|
|
4689
4687
|
}
|
|
4690
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4691
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
4692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4688
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
4689
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n class=\"overlay\"\r\n (click)=\"onOverlayClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER',\r\n black: background === 'black'\r\n }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n <div\r\n class=\"dialog\"\r\n [class.animate]=\"animation\"\r\n (click)=\"onDialogClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER'\r\n }\"\r\n >\r\n <ng-template appInsertion></ng-template>\r\n </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:rgba(0,0,0,.7)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }] });
|
|
4690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
4693
4691
|
type: Component,
|
|
4694
4692
|
args: [{ selector: 'app-dialog', template: "<div\r\n class=\"overlay\"\r\n (click)=\"onOverlayClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER',\r\n black: background === 'black'\r\n }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n <div\r\n class=\"dialog\"\r\n [class.animate]=\"animation\"\r\n (click)=\"onDialogClicked($event)\"\r\n [ngClass]=\"{\r\n top: position === 'TOP',\r\n right: position === 'RIGHT',\r\n bottom: position === 'BOTTOM',\r\n left: position === 'LEFT',\r\n center: position === 'CENTER'\r\n }\"\r\n >\r\n <ng-template appInsertion></ng-template>\r\n </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:rgba(0,0,0,.7)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
|
|
4695
4693
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i3$1.Router }]; }, propDecorators: { insertionPoint: [{
|
|
@@ -4699,10 +4697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4699
4697
|
|
|
4700
4698
|
class DialogModule {
|
|
4701
4699
|
}
|
|
4702
|
-
DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4703
|
-
DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4704
|
-
DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4700
|
+
DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4701
|
+
DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DialogModule, declarations: [DialogComponent, InsertionDirective], imports: [CommonModule] });
|
|
4702
|
+
DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogModule, providers: [DialogRef], imports: [CommonModule] });
|
|
4703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogModule, decorators: [{
|
|
4706
4704
|
type: NgModule,
|
|
4707
4705
|
args: [{
|
|
4708
4706
|
imports: [CommonModule],
|
|
@@ -4762,9 +4760,9 @@ class DialogService {
|
|
|
4762
4760
|
this.dialogComponentRef.destroy();
|
|
4763
4761
|
}
|
|
4764
4762
|
}
|
|
4765
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4766
|
-
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.
|
|
4767
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4763
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4764
|
+
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, providedIn: DialogModule });
|
|
4765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, decorators: [{
|
|
4768
4766
|
type: Injectable,
|
|
4769
4767
|
args: [{
|
|
4770
4768
|
providedIn: DialogModule,
|
|
@@ -4878,9 +4876,9 @@ class FormGroupComponent {
|
|
|
4878
4876
|
this.displayCriteria = selection;
|
|
4879
4877
|
}
|
|
4880
4878
|
}
|
|
4881
|
-
FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4882
|
-
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\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img 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\"></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\"></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\"></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" }] });
|
|
4883
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4879
|
+
FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4880
|
+
FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img 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\"></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\"></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\"></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" }] });
|
|
4881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
4884
4882
|
type: Component,
|
|
4885
4883
|
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\"></i>\r\n <span class=\"value\">Angel Kleven</span>\r\n </span>\r\n </div>\r\n <button class=\"count\">+10</button>\r\n </div>\r\n <button class=\"edit\"><i class=\"icons\"></i> Edit</button>\r\n </div>\r\n <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group-row\">\r\n <div class=\"image\">\r\n <img 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\"></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\"></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\"></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"] }]
|
|
4886
4884
|
}], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { openCategoryList: [{
|
|
@@ -4905,14 +4903,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4905
4903
|
|
|
4906
4904
|
class FloatingBarModule {
|
|
4907
4905
|
}
|
|
4908
|
-
FloatingBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4909
|
-
FloatingBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4906
|
+
FloatingBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4907
|
+
FloatingBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule,
|
|
4910
4908
|
PopoverModule,
|
|
4911
4909
|
TooltipModule], exports: [FloatingBarComponent] });
|
|
4912
|
-
FloatingBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4910
|
+
FloatingBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarModule, imports: [CommonModule,
|
|
4913
4911
|
PopoverModule,
|
|
4914
4912
|
TooltipModule] });
|
|
4915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FloatingBarModule, decorators: [{
|
|
4916
4914
|
type: NgModule,
|
|
4917
4915
|
args: [{
|
|
4918
4916
|
declarations: [
|
|
@@ -4931,10 +4929,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4931
4929
|
|
|
4932
4930
|
class DirectivesModule {
|
|
4933
4931
|
}
|
|
4934
|
-
DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4935
|
-
DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4936
|
-
DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4932
|
+
DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4933
|
+
DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DirectivesModule, declarations: [ScrollInViewDirective], imports: [CommonModule], exports: [ScrollInViewDirective] });
|
|
4934
|
+
DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
|
|
4935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DirectivesModule, decorators: [{
|
|
4938
4936
|
type: NgModule,
|
|
4939
4937
|
args: [{
|
|
4940
4938
|
declarations: [
|
|
@@ -4951,10 +4949,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4951
4949
|
|
|
4952
4950
|
class NoDataModule {
|
|
4953
4951
|
}
|
|
4954
|
-
NoDataModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4955
|
-
NoDataModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4956
|
-
NoDataModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4952
|
+
NoDataModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NoDataModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4953
|
+
NoDataModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NoDataModule, declarations: [NoDataComponent], imports: [CommonModule], exports: [NoDataComponent] });
|
|
4954
|
+
NoDataModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NoDataModule, imports: [CommonModule] });
|
|
4955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NoDataModule, decorators: [{
|
|
4958
4956
|
type: NgModule,
|
|
4959
4957
|
args: [{
|
|
4960
4958
|
declarations: [NoDataComponent],
|
|
@@ -4965,20 +4963,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
4965
4963
|
|
|
4966
4964
|
class ConfigureWidgetsModule {
|
|
4967
4965
|
}
|
|
4968
|
-
ConfigureWidgetsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
4969
|
-
ConfigureWidgetsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
4966
|
+
ConfigureWidgetsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4967
|
+
ConfigureWidgetsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsModule, declarations: [ConfigureWidgetsComponent, SearchPipe], imports: [CommonModule,
|
|
4970
4968
|
FloatingBarModule,
|
|
4971
4969
|
FormgroupModule,
|
|
4972
4970
|
FormsModule,
|
|
4973
4971
|
DirectivesModule,
|
|
4974
4972
|
NoDataModule], exports: [ConfigureWidgetsComponent] });
|
|
4975
|
-
ConfigureWidgetsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
4973
|
+
ConfigureWidgetsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsModule, imports: [CommonModule,
|
|
4976
4974
|
FloatingBarModule,
|
|
4977
4975
|
FormgroupModule,
|
|
4978
4976
|
FormsModule,
|
|
4979
4977
|
DirectivesModule,
|
|
4980
4978
|
NoDataModule] });
|
|
4981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
4979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigureWidgetsModule, decorators: [{
|
|
4982
4980
|
type: NgModule,
|
|
4983
4981
|
args: [{
|
|
4984
4982
|
declarations: [
|
|
@@ -5007,9 +5005,9 @@ class LoaderComponent {
|
|
|
5007
5005
|
}
|
|
5008
5006
|
ngOnInit() { }
|
|
5009
5007
|
}
|
|
5010
|
-
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
5011
|
-
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
|
|
5012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
5008
|
+
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5009
|
+
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] });
|
|
5010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
5013
5011
|
type: Component,
|
|
5014
5012
|
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"] }]
|
|
5015
5013
|
}], ctorParameters: function () { return [{ type: Configurations, decorators: [{
|
|
@@ -5018,24 +5016,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
5018
5016
|
|
|
5019
5017
|
class VLoaderModule {
|
|
5020
5018
|
}
|
|
5021
|
-
VLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
5022
|
-
VLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
5023
|
-
VLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
5024
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
5019
|
+
VLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5020
|
+
VLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: VLoaderModule, declarations: [LoaderComponent, LoaderInlineComponent], imports: [CommonModule], exports: [LoaderComponent, LoaderInlineComponent] });
|
|
5021
|
+
VLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VLoaderModule, imports: [CommonModule] });
|
|
5022
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VLoaderModule, decorators: [{
|
|
5025
5023
|
type: NgModule,
|
|
5026
5024
|
args: [{
|
|
5027
5025
|
declarations: [LoaderComponent, LoaderInlineComponent],
|
|
5028
|
-
imports: [CommonModule
|
|
5026
|
+
imports: [CommonModule],
|
|
5029
5027
|
exports: [LoaderComponent, LoaderInlineComponent],
|
|
5030
5028
|
}]
|
|
5031
5029
|
}] });
|
|
5032
5030
|
|
|
5033
5031
|
class SnackBarModule {
|
|
5034
5032
|
}
|
|
5035
|
-
SnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
5036
|
-
SnackBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
5037
|
-
SnackBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
5038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
5033
|
+
SnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5034
|
+
SnackBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SnackBarModule, declarations: [SnackBarComponent], imports: [CommonModule], exports: [SnackBarComponent] });
|
|
5035
|
+
SnackBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarModule, imports: [CommonModule] });
|
|
5036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SnackBarModule, decorators: [{
|
|
5039
5037
|
type: NgModule,
|
|
5040
5038
|
args: [{
|
|
5041
5039
|
declarations: [SnackBarComponent],
|
|
@@ -5046,10 +5044,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
5046
5044
|
|
|
5047
5045
|
class SmileyDialogModule {
|
|
5048
5046
|
}
|
|
5049
|
-
SmileyDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
5050
|
-
SmileyDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
5051
|
-
SmileyDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
5052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.
|
|
5047
|
+
SmileyDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5048
|
+
SmileyDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogModule, declarations: [SmileyDialogComponent], imports: [CommonModule], exports: [SmileyDialogComponent] });
|
|
5049
|
+
SmileyDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogModule, imports: [CommonModule] });
|
|
5050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmileyDialogModule, decorators: [{
|
|
5053
5051
|
type: NgModule,
|
|
5054
5052
|
args: [{
|
|
5055
5053
|
declarations: [SmileyDialogComponent],
|
|
@@ -5058,10 +5056,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
5058
5056
|
}]
|
|
5059
5057
|
}] });
|
|
5060
5058
|
|
|
5061
|
-
function playerFactory() {
|
|
5062
|
-
// add this line
|
|
5063
|
-
return import('lottie-web'); // add this line
|
|
5064
|
-
}
|
|
5065
5059
|
class CreateDashboardModule {
|
|
5066
5060
|
static forRoot(environmentConfig) {
|
|
5067
5061
|
return {
|
|
@@ -5070,8 +5064,8 @@ class CreateDashboardModule {
|
|
|
5070
5064
|
};
|
|
5071
5065
|
}
|
|
5072
5066
|
}
|
|
5073
|
-
CreateDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.
|
|
5074
|
-
CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
5067
|
+
CreateDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5068
|
+
CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardModule, declarations: [CreateDashboardComponent,
|
|
5075
5069
|
UserListComponent,
|
|
5076
5070
|
FormGroupComponent,
|
|
5077
5071
|
ResponsibilityCenterComponent,
|
|
@@ -5097,8 +5091,8 @@ CreateDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
|
|
|
5097
5091
|
SnackBarModule,
|
|
5098
5092
|
NoDataModule,
|
|
5099
5093
|
DirectivesModule,
|
|
5100
|
-
SmileyDialogModule
|
|
5101
|
-
CreateDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
5094
|
+
SmileyDialogModule], exports: [CreateDashboardComponent] });
|
|
5095
|
+
CreateDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardModule, imports: [CommonModule,
|
|
5102
5096
|
// MarxEditorModule,
|
|
5103
5097
|
VcomplyEditorModule,
|
|
5104
5098
|
FormgroupModule,
|
|
@@ -5116,9 +5110,8 @@ CreateDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
|
|
|
5116
5110
|
SnackBarModule,
|
|
5117
5111
|
NoDataModule,
|
|
5118
5112
|
DirectivesModule,
|
|
5119
|
-
SmileyDialogModule
|
|
5120
|
-
|
|
5121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardModule, decorators: [{
|
|
5113
|
+
SmileyDialogModule] });
|
|
5114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateDashboardModule, decorators: [{
|
|
5122
5115
|
type: NgModule,
|
|
5123
5116
|
args: [{
|
|
5124
5117
|
declarations: [
|
|
@@ -5152,7 +5145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
5152
5145
|
NoDataModule,
|
|
5153
5146
|
DirectivesModule,
|
|
5154
5147
|
SmileyDialogModule,
|
|
5155
|
-
LottieModule.forRoot({ player: playerFactory }),
|
|
5156
5148
|
],
|
|
5157
5149
|
exports: [CreateDashboardComponent],
|
|
5158
5150
|
}]
|
|
@@ -5166,5 +5158,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
5166
5158
|
* Generated bundle index. Do not edit.
|
|
5167
5159
|
*/
|
|
5168
5160
|
|
|
5169
|
-
export { CreateDashboardComponent, CreateDashboardModule, CreateDashboardService$1 as CreateDashboardService
|
|
5161
|
+
export { CreateDashboardComponent, CreateDashboardModule, CreateDashboardService$1 as CreateDashboardService };
|
|
5170
5162
|
//# sourceMappingURL=create-dashboard.mjs.map
|