vcomply-workflow-engine 2.6.184 → 2.6.185

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.
Files changed (36) hide show
  1. package/bundles/vcomply-workflow-engine.umd.js +428 -229
  2. package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
  3. package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.js +12 -3
  4. package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.ngfactory.js +46 -45
  5. package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.ngsummary.json +1 -1
  6. package/esm2015/lib/sharedComponents/owner-list/owner-list.component.js +16 -3
  7. package/esm2015/lib/sharedComponents/owner-list/owner-list.component.ngfactory.js +26 -25
  8. package/esm2015/lib/sharedComponents/owner-list/owner-list.component.ngsummary.json +1 -1
  9. package/esm2015/lib/sharedComponents/users-radio-list/users-radio-list.component.js +13 -4
  10. package/esm2015/lib/sharedComponents/users-radio-list/users-radio-list.component.ngfactory.js +22 -21
  11. package/esm2015/lib/sharedComponents/users-radio-list/users-radio-list.component.ngsummary.json +1 -1
  12. package/esm2015/lib/workflow-compliance/workflow-compliance.component.js +297 -216
  13. package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngfactory.js +9 -9
  14. package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngsummary.json +1 -1
  15. package/esm2015/lib/workflow-engine.module.ngfactory.js +1 -1
  16. package/esm2015/lib/workflow-program/create-program-ui/create-program-ui.module.js +6 -3
  17. package/esm2015/lib/workflow-program/create-program-ui/create-program-ui.module.ngfactory.js +1 -1
  18. package/esm2015/lib/workflow-program/create-program-ui/create-program-ui.module.ngsummary.json +1 -1
  19. package/esm2015/lib/workflow-program/create-program-ui/define-framework-listing/pipes/tooltip-message.pipe.js +63 -0
  20. package/esm2015/lib/workflow-program/create-program-ui/define-framework-listing/pipes/tooltip-message.pipe.ngsummary.json +1 -0
  21. package/esm2015/lib/workflow-program/create-program-ui/user-group-list/user-group-list.component.js +15 -2
  22. package/esm2015/lib/workflow-program/create-program-ui/user-group-list/user-group-list.component.ngfactory.js +32 -31
  23. package/esm2015/lib/workflow-program/create-program-ui/user-group-list/user-group-list.component.ngsummary.json +1 -1
  24. package/esm2015/vcomply-workflow-engine.js +6 -5
  25. package/esm2015/vcomply-workflow-engine.ngsummary.json +1 -1
  26. package/fesm2015/vcomply-workflow-engine.js +415 -226
  27. package/fesm2015/vcomply-workflow-engine.js.map +1 -1
  28. package/lib/sharedComponents/group-users-list/group-users-list.component.d.ts +5 -0
  29. package/lib/sharedComponents/owner-list/owner-list.component.d.ts +6 -0
  30. package/lib/sharedComponents/users-radio-list/users-radio-list.component.d.ts +5 -0
  31. package/lib/workflow-compliance/workflow-compliance.component.d.ts +10 -0
  32. package/lib/workflow-program/create-program-ui/define-framework-listing/pipes/tooltip-message.pipe.d.ts +4 -0
  33. package/lib/workflow-program/create-program-ui/user-group-list/user-group-list.component.d.ts +6 -0
  34. package/package.json +2 -2
  35. package/vcomply-workflow-engine.d.ts +5 -4
  36. package/vcomply-workflow-engine.metadata.json +1 -1
package/bundles/vcomply-workflow-engine.umd.js CHANGED
@@ -2983,6 +2983,11 @@
2983
2983
  this.frameworkDetails = [];
2984
2984
  this.isEntrust = true;
2985
2985
  this.allGroupAssignee = true;
2986
+ this.assignorId = [];
2987
+ this.assigneeIds = [];
2988
+ this.reviewerIds = [];
2989
+ this.overseerIds = [];
2990
+ this.disableRadioAssignee = [];
2986
2991
  this.pickerChanged = new i0.EventEmitter();
2987
2992
  this.populateOption = new i0.EventEmitter();
2988
2993
  this.hideElementsFromMoreOptions = new i0.EventEmitter();
@@ -3034,6 +3039,9 @@
3034
3039
  this.assignorsList = [];
3035
3040
  this.assigneesList = [];
3036
3041
  this.reviewersList = [];
3042
+ this.disableAssigneeIds = [];
3043
+ this.disableReviewerIds = [];
3044
+ this.disableOverseerIds = [];
3037
3045
  this.reviewerMemberIdsList = [];
3038
3046
  this.groupOverseerList = [];
3039
3047
  this.groupReviewerList = [];
@@ -3292,10 +3300,11 @@
3292
3300
  this.hideElementsFromMoreOptions.emit(this.hiddenList);
3293
3301
  };
3294
3302
  WorkflowComplianceComponent.prototype.activateSelector = function (type, event) {
3303
+ var _a;
3295
3304
  this.activeSelector = event ? type : '';
3296
3305
  if (type === 'checkpoints-new')
3297
3306
  this.authService.previewPanel.next(event);
3298
- if (this.sideSelectorElements.includes(type)) {
3307
+ if ((_a = this.sideSelectorElements) === null || _a === void 0 ? void 0 : _a.includes(type)) {
3299
3308
  this.pickerChanged.emit(event);
3300
3309
  }
3301
3310
  };
@@ -3335,7 +3344,7 @@
3335
3344
  _this.responsibilityCentersList = res;
3336
3345
  _this.rcListLoaded = true;
3337
3346
  var ids = _this.returnIds(_this.responsibilityForm.rc, 'item_id');
3338
- var RC = _this.responsibilityCentersList.filter(function (element) { return ids.includes(element.item_id); });
3347
+ var RC = _this.responsibilityCentersList.filter(function (element) { return ids === null || ids === void 0 ? void 0 : ids.includes(element.item_id); });
3339
3348
  if (RC === null || RC === void 0 ? void 0 : RC.length) {
3340
3349
  _this.responsibilityForm.rc = RC;
3341
3350
  }
@@ -3366,8 +3375,9 @@
3366
3375
  var _this = this;
3367
3376
  this.assuranceCategoryListLoaded = true;
3368
3377
  this.responsibilityService.getAssurance().subscribe(function (res) {
3378
+ var _a;
3369
3379
  _this.assuranceCategoriesList = res;
3370
- if ((_this.subscriptionDetails && !_this.subscriptionDetails[0].assurance_flag) || _this.assuranceCategoriesList.length == 0) {
3380
+ if ((_this.subscriptionDetails && !_this.subscriptionDetails[0].assurance_flag) || ((_a = _this.assuranceCategoriesList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
3371
3381
  _this.hiddenList.push('ASSURANCE');
3372
3382
  }
3373
3383
  _this.hideElementsFromMoreOptions.emit(_this.hiddenList);
@@ -3381,8 +3391,9 @@
3381
3391
  var _this = this;
3382
3392
  // this.assuranceCategoryListLoaded = true;
3383
3393
  this.responsibilityService.getAssuranceForRequiresAudit().subscribe(function (res) {
3394
+ var _a;
3384
3395
  _this.assuranceRequiresAuditList = res;
3385
- if ((_this.subscriptionDetails && !_this.subscriptionDetails[0].audit_flag) || _this.assuranceRequiresAuditList.length == 0) {
3396
+ if ((_this.subscriptionDetails && !_this.subscriptionDetails[0].audit_flag) || ((_a = _this.assuranceRequiresAuditList) === null || _a === void 0 ? void 0 : _a.length) == 0) {
3386
3397
  _this.hiddenList.push('REQUIRES_AUDIT');
3387
3398
  }
3388
3399
  _this.hideElementsFromMoreOptions.emit(_this.hiddenList);
@@ -3446,11 +3457,11 @@
3446
3457
  var _this = this;
3447
3458
  this.loader = true;
3448
3459
  this.programService.getProgram(programId).subscribe(function (res) {
3449
- var _a, _b, _c, _d, _e, _f, _g, _h;
3460
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
3450
3461
  if ((res === null || res === void 0 ? void 0 : res.assessment) && ((_a = res === null || res === void 0 ? void 0 : res.assessment) === null || _a === void 0 ? void 0 : _a.length) && ((_c = Object.keys((_b = _this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assessment)) === null || _c === void 0 ? void 0 : _c.length)) {
3451
3462
  var categoryAssessment = res === null || res === void 0 ? void 0 : res.assessment.filter(function (assessment) { var _a, _b; return ((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assessment) === null || _b === void 0 ? void 0 : _b.category_id) === (assessment === null || assessment === void 0 ? void 0 : assessment.category_id); });
3452
3463
  if ((categoryAssessment === null || categoryAssessment === void 0 ? void 0 : categoryAssessment.length) && ((_e = (_d = categoryAssessment[0]) === null || _d === void 0 ? void 0 : _d.assessmentIds) === null || _e === void 0 ? void 0 : _e.length)) {
3453
- var isExist = (_f = categoryAssessment[0]) === null || _f === void 0 ? void 0 : _f.assessmentIds.includes((_h = (_g = _this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.assessment) === null || _h === void 0 ? void 0 : _h.assessment_id);
3464
+ var isExist = (_g = (_f = categoryAssessment[0]) === null || _f === void 0 ? void 0 : _f.assessmentIds) === null || _g === void 0 ? void 0 : _g.includes((_j = (_h = _this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.assessment) === null || _j === void 0 ? void 0 : _j.assessment_id);
3454
3465
  if (!isExist) {
3455
3466
  _this.responsibilityForm.assessment = { assessment_id: "", category_id: "" };
3456
3467
  }
@@ -3518,7 +3529,7 @@
3518
3529
  params = params.append('program_ids', program_id);
3519
3530
  }
3520
3531
  this.responsibilityService.getOrganizationPeople(params).subscribe(function (res) {
3521
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
3532
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
3522
3533
  _this.assigneesList = res.assignee.map(function (user) {
3523
3534
  user.member_name = user.employee_name;
3524
3535
  return user;
@@ -3536,12 +3547,12 @@
3536
3547
  reviewersList: __spreadArray([], __read(new Set(_this.reviewersList))),
3537
3548
  overseersList: __spreadArray([], __read(new Set(_this.overseersList))),
3538
3549
  };
3539
- if (((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) || _this.responsibilityForm.assignees.list.length) {
3540
- if (_this.responsibilityForm.assignees.list.length) {
3550
+ if (((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) || ((_c = _this.responsibilityForm.assignees.list) === null || _c === void 0 ? void 0 : _c.length)) {
3551
+ if ((_d = _this.responsibilityForm.assignees.list) === null || _d === void 0 ? void 0 : _d.length) {
3541
3552
  var ids = _this.returnIds(_this.responsibilityForm.assignees.list, 'my_member_id');
3542
- var allIds_1 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set((_d = (_c = _this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.default_assignee_ids)));
3543
- var assignors = _this.assigneesList.filter(function (element) { return allIds_1.includes(element.my_member_id); });
3544
- if (assignors.length) {
3553
+ var allIds_1 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set((_f = (_e = _this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.program[0]) === null || _f === void 0 ? void 0 : _f.default_assignee_ids)));
3554
+ var assignors = _this.assigneesList.filter(function (element) { return allIds_1 === null || allIds_1 === void 0 ? void 0 : allIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3555
+ if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
3545
3556
  _this.responsibilityForm.assignees.list = assignors;
3546
3557
  }
3547
3558
  else {
@@ -3549,8 +3560,8 @@
3549
3560
  }
3550
3561
  }
3551
3562
  else {
3552
- var assignors = _this.assigneesList.filter(function (element) { var _a, _b; return (_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids.includes(element.my_member_id); });
3553
- if (assignors.length) {
3563
+ var assignors = _this.assigneesList.filter(function (element) { var _a, _b, _c; return (_c = (_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_ids) === null || _c === void 0 ? void 0 : _c.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3564
+ if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
3554
3565
  _this.responsibilityForm.assignees.list = assignors;
3555
3566
  }
3556
3567
  }
@@ -3562,12 +3573,12 @@
3562
3573
  _this.populateProgramAssigneeGroup();
3563
3574
  }
3564
3575
  var checkedMoreOptions = [];
3565
- if (((_f = (_e = _this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.program[0]) === null || _f === void 0 ? void 0 : _f.default_reviewers) || ((_j = (_h = (_g = _this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.reviewers) === null || _h === void 0 ? void 0 : _h.list) === null || _j === void 0 ? void 0 : _j.length) || ((_m = (_l = (_k = _this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.groupReviewers) === null || _l === void 0 ? void 0 : _l.list) === null || _m === void 0 ? void 0 : _m.length)) {
3576
+ if (((_h = (_g = _this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.program[0]) === null || _h === void 0 ? void 0 : _h.default_reviewers) || ((_l = (_k = (_j = _this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.reviewers) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) || ((_p = (_o = (_m = _this.responsibilityForm) === null || _m === void 0 ? void 0 : _m.groupReviewers) === null || _o === void 0 ? void 0 : _o.list) === null || _p === void 0 ? void 0 : _p.length)) {
3566
3577
  var ids = _this.returnIds(_this.responsibilityForm.reviewers.list, 'my_member_id');
3567
3578
  var allIds_2 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set(_this.responsibilityForm.program[0].default_reviewers)));
3568
- var reviewers = _this.reviewersList.filter(function (element) { return allIds_2.includes(element.my_member_id); });
3569
- // const reviewers = this.reviewersList.filter((element: any) => this.responsibilityForm.program[0].default_reviewers.includes(element.my_member_id));
3570
- if ((reviewers.length || (_this.featureFlag_groups && ((_q = (_p = (_o = _this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.groupReviewers) === null || _p === void 0 ? void 0 : _p.list) === null || _q === void 0 ? void 0 : _q.length) > 0))) {
3579
+ var reviewers = _this.reviewersList.filter(function (element) { return allIds_2 === null || allIds_2 === void 0 ? void 0 : allIds_2.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3580
+ // const reviewers = this.reviewersList.filter((element: any) => this.responsibilityForm.program[0].default_reviewers?.includes(element?.my_member_id));
3581
+ if (((reviewers === null || reviewers === void 0 ? void 0 : reviewers.length) || (_this.featureFlag_groups && ((_s = (_r = (_q = _this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.groupReviewers) === null || _r === void 0 ? void 0 : _r.list) === null || _s === void 0 ? void 0 : _s.length) > 0))) {
3571
3582
  _this.responsibilityForm.reviewers.list = reviewers;
3572
3583
  _this.responsibilityForm.reviewers.list = reviewers;
3573
3584
  if (_this.featureFlag_groups) {
@@ -3582,24 +3593,24 @@
3582
3593
  else {
3583
3594
  _this.responsibilityForm.reviewers.list = [];
3584
3595
  }
3585
- if (_this.responsibilityForm.program[0].default_overseers || ((_t = (_s = (_r = _this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.overseers) === null || _s === void 0 ? void 0 : _s.list) === null || _t === void 0 ? void 0 : _t.length) || ((_w = (_v = (_u = _this.responsibilityForm) === null || _u === void 0 ? void 0 : _u.overseers) === null || _v === void 0 ? void 0 : _v.notifyList) === null || _w === void 0 ? void 0 : _w.length)) {
3586
- var ids = _this.returnIds((_y = (_x = _this.responsibilityForm) === null || _x === void 0 ? void 0 : _x.overseers) === null || _y === void 0 ? void 0 : _y.list, 'my_member_id');
3587
- var allDefaultCCIds_1 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set((_1 = (_0 = (_z = _this.responsibilityForm) === null || _z === void 0 ? void 0 : _z.program[0]) === null || _0 === void 0 ? void 0 : _0.default_overseers) === null || _1 === void 0 ? void 0 : _1.cc_email)));
3588
- var overseersCC = (_2 = _this.overseersList) === null || _2 === void 0 ? void 0 : _2.filter(function (element) { return allDefaultCCIds_1 === null || allDefaultCCIds_1 === void 0 ? void 0 : allDefaultCCIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3596
+ if (_this.responsibilityForm.program[0].default_overseers || ((_v = (_u = (_t = _this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.overseers) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length) || ((_y = (_x = (_w = _this.responsibilityForm) === null || _w === void 0 ? void 0 : _w.overseers) === null || _x === void 0 ? void 0 : _x.notifyList) === null || _y === void 0 ? void 0 : _y.length)) {
3597
+ var ids = _this.returnIds((_0 = (_z = _this.responsibilityForm) === null || _z === void 0 ? void 0 : _z.overseers) === null || _0 === void 0 ? void 0 : _0.list, 'my_member_id');
3598
+ var allDefaultCCIds_1 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set((_3 = (_2 = (_1 = _this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.program[0]) === null || _2 === void 0 ? void 0 : _2.default_overseers) === null || _3 === void 0 ? void 0 : _3.cc_email)));
3599
+ var overseersCC = (_4 = _this.overseersList) === null || _4 === void 0 ? void 0 : _4.filter(function (element) { return allDefaultCCIds_1 === null || allDefaultCCIds_1 === void 0 ? void 0 : allDefaultCCIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3589
3600
  // const overseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.cc_email.includes(element.my_member_id));
3590
3601
  var notifyListIds = _this.returnIds(_this.responsibilityForm.overseers.notifyList, 'my_member_id');
3591
- var allDefaultCCFailureIds_1 = __spreadArray(__spreadArray([], __read(new Set(notifyListIds))), __read(new Set((_5 = (_4 = (_3 = _this.responsibilityForm) === null || _3 === void 0 ? void 0 : _3.program[0]) === null || _4 === void 0 ? void 0 : _4.default_overseers) === null || _5 === void 0 ? void 0 : _5.failure_cc_email)));
3592
- var overseersCCFailure = (_6 = _this.overseersList) === null || _6 === void 0 ? void 0 : _6.filter(function (element) { return allDefaultCCFailureIds_1 === null || allDefaultCCFailureIds_1 === void 0 ? void 0 : allDefaultCCFailureIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3602
+ var allDefaultCCFailureIds_1 = __spreadArray(__spreadArray([], __read(new Set(notifyListIds))), __read(new Set((_7 = (_6 = (_5 = _this.responsibilityForm) === null || _5 === void 0 ? void 0 : _5.program[0]) === null || _6 === void 0 ? void 0 : _6.default_overseers) === null || _7 === void 0 ? void 0 : _7.failure_cc_email)));
3603
+ var overseersCCFailure = (_8 = _this.overseersList) === null || _8 === void 0 ? void 0 : _8.filter(function (element) { return allDefaultCCFailureIds_1 === null || allDefaultCCFailureIds_1 === void 0 ? void 0 : allDefaultCCFailureIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3593
3604
  // const notifyOverseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.failure_cc_email.includes(element.my_member_id));
3594
- // if (overseers.length) {
3605
+ // if (overseers?.length) {
3595
3606
  // this.responsibilityForm.overseers.list = overseers;
3596
3607
  // this.moreOptions.OVERSEER = true;
3597
3608
  // }
3598
- // if (notifyOverseers.length) {
3609
+ // if (notifyOverseers?.length) {
3599
3610
  // this.responsibilityForm.overseers.notifyList = notifyOverseers;
3600
3611
  // this.moreOptions.OVERSEER = true;
3601
3612
  // }
3602
- if (overseersCC.length) {
3613
+ if (overseersCC === null || overseersCC === void 0 ? void 0 : overseersCC.length) {
3603
3614
  _this.responsibilityForm.overseers.list = overseersCC;
3604
3615
  if (_this.featureFlag_groups) {
3605
3616
  _this.responsibilityForm.overseers.list = _this.assignUserMemberId(_this.responsibilityForm.overseers.list);
@@ -3609,7 +3620,7 @@
3609
3620
  else {
3610
3621
  _this.responsibilityForm.overseers.list = [];
3611
3622
  }
3612
- if (overseersCCFailure.length) {
3623
+ if (overseersCCFailure === null || overseersCCFailure === void 0 ? void 0 : overseersCCFailure.length) {
3613
3624
  _this.responsibilityForm.overseers.notifyList = overseersCCFailure;
3614
3625
  if (_this.featureFlag_groups) {
3615
3626
  _this.responsibilityForm.overseers.notifyList = _this.assignUserMemberId(_this.responsibilityForm.overseers.notifyList);
@@ -3641,7 +3652,7 @@
3641
3652
  params = params.append('program_ids', program_id);
3642
3653
  }
3643
3654
  this.responsibilityService.getOrganizationGroups(params).pipe(rxjs.takeUntil(this.unSubscribeProgram)).subscribe(function (res) {
3644
- var _a, _b;
3655
+ var _a, _b, _c, _d, _e;
3645
3656
  var data = res !== null && res !== void 0 ? res : [];
3646
3657
  _this.OrgGroup = data;
3647
3658
  var groups = [];
@@ -3656,15 +3667,15 @@
3656
3667
  }
3657
3668
  _this.groupsList = groups;
3658
3669
  _this.groupsListLoaded = true;
3659
- if (_this.featureFlag_groups && _this.OrgGroup.length && _this.responsibilityForm.program.length) {
3670
+ if (_this.featureFlag_groups && ((_a = _this.OrgGroup) === null || _a === void 0 ? void 0 : _a.length) && ((_b = _this.responsibilityForm.program) === null || _b === void 0 ? void 0 : _b.length)) {
3660
3671
  _this.refreshListsWhileProgramSelected();
3661
3672
  }
3662
3673
  else {
3663
3674
  _this.refreshAllLists();
3664
3675
  }
3665
- if (((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.default_assignee_group_ids) && program_id) {
3666
- var selectedGroups = data.filter(function (element) { return _this.responsibilityForm.program[0].default_assignee_group_ids.includes(element.group_id); });
3667
- if (groups.length) {
3676
+ if (((_d = (_c = _this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.default_assignee_group_ids) && program_id) {
3677
+ var selectedGroups = data.filter(function (element) { var _a; return (_a = _this.responsibilityForm.program[0].default_assignee_group_ids) === null || _a === void 0 ? void 0 : _a.includes(element.group_id); });
3678
+ if (groups === null || groups === void 0 ? void 0 : groups.length) {
3668
3679
  var memberIds_1 = [];
3669
3680
  selectedGroups.forEach(function (eachGroup) {
3670
3681
  var _a;
@@ -3672,17 +3683,17 @@
3672
3683
  memberIds_1 = __spreadArray([], __read(new Set(memberIds_1.concat(eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids))));
3673
3684
  }
3674
3685
  });
3675
- if (_this.responsibilityForm.assignees.list.length) {
3686
+ if ((_e = _this.responsibilityForm.assignees.list) === null || _e === void 0 ? void 0 : _e.length) {
3676
3687
  var ids = _this.returnIds(_this.responsibilityForm.assignees.list, 'my_member_id');
3677
3688
  var allIds_3 = __spreadArray(__spreadArray([], __read(new Set(ids))), __read(new Set(memberIds_1)));
3678
- var assignors = _this.assigneesList.filter(function (element) { return allIds_3.includes(element.my_member_id); });
3679
- if (assignors.length) {
3689
+ var assignors = _this.assigneesList.filter(function (element) { return allIds_3 === null || allIds_3 === void 0 ? void 0 : allIds_3.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3690
+ if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
3680
3691
  _this.responsibilityForm.assignees.list = assignors;
3681
3692
  }
3682
3693
  }
3683
3694
  else {
3684
- var assignors = _this.assigneesList.filter(function (element) { return memberIds_1.includes(element.my_member_id); });
3685
- if (assignors.length) {
3695
+ var assignors = _this.assigneesList.filter(function (element) { return memberIds_1 === null || memberIds_1 === void 0 ? void 0 : memberIds_1.includes(element === null || element === void 0 ? void 0 : element.my_member_id); });
3696
+ if (assignors === null || assignors === void 0 ? void 0 : assignors.length) {
3686
3697
  _this.responsibilityForm.assignees.list = assignors;
3687
3698
  }
3688
3699
  }
@@ -3696,7 +3707,7 @@
3696
3707
  WorkflowComplianceComponent.prototype.getEditResponsibilityDetails = function (id) {
3697
3708
  var _this = this;
3698
3709
  this.responsibilityService.editResponsibility(id).subscribe(function (res) {
3699
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
3710
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
3700
3711
  _this.isDuplicateEntrust = true;
3701
3712
  if (res) {
3702
3713
  _this.originalAssignee = [Number(res.assigned_to)];
@@ -3712,7 +3723,7 @@
3712
3723
  var testPlanCategory = typeof (res === null || res === void 0 ? void 0 : res.testplan_category_id) === 'string' ? [] : res === null || res === void 0 ? void 0 : res.testplan_category_id;
3713
3724
  var requiredAuditCategoryId = ((_b = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _b === void 0 ? void 0 : _b.category_id) ? [(_c = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _c === void 0 ? void 0 : _c.category_id] : [];
3714
3725
  var reviewerDetails = Object.keys(res === null || res === void 0 ? void 0 : res.reviewer_arr);
3715
- _this.hasReviewer = reviewerDetails.length > 0;
3726
+ _this.hasReviewer = (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0;
3716
3727
  _this.assigneeRadioSelect = (((_d = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _d === void 0 ? void 0 : _d.length) == 0) ? true : false;
3717
3728
  _this.isEntrust = res.isGroupAssignTo ? true : false;
3718
3729
  var linkage = res === null || res === void 0 ? void 0 : res.linkedProgramDetails;
@@ -3720,7 +3731,7 @@
3720
3731
  _this.responsibilityForm = {
3721
3732
  assignors: {
3722
3733
  enable: false,
3723
- list: _this.setList(_this.assignorsList, [res.member_id], 'member_id').length > 0 ? _this.setList(_this.assignorsList, [res.member_id], 'member_id') : [currentsUerInfo],
3734
+ list: ((_e = _this.setList(_this.assignorsList, [res.member_id], 'member_id')) === null || _e === void 0 ? void 0 : _e.length) > 0 ? _this.setList(_this.assignorsList, [res.member_id], 'member_id') : [currentsUerInfo],
3724
3735
  },
3725
3736
  responsibility: {
3726
3737
  name: res === null || res === void 0 ? void 0 : res.report_name,
@@ -3728,36 +3739,36 @@
3728
3739
  },
3729
3740
  assignees: {
3730
3741
  whoCanComplete: (res.isGroupAssignTo) ? 'ANY_ONE' : 'ALL',
3731
- list: (res.assigned_to_member_id.length == 0) ? _this.setList(_this.assigneesList, [Number(res.assigned_to)], 'employee_id') :
3742
+ list: (((_f = res.assigned_to_member_id) === null || _f === void 0 ? void 0 : _f.length) == 0) ? _this.setList(_this.assigneesList, [Number(res.assigned_to)], 'employee_id') :
3732
3743
  _this.setList(_this.assigneesList, res.assigned_to_member_id, 'my_member_id'),
3733
3744
  },
3734
3745
  frequency: res === null || res === void 0 ? void 0 : res.frequency_details,
3735
3746
  description: res === null || res === void 0 ? void 0 : res.remarks,
3736
3747
  objective: res === null || res === void 0 ? void 0 : res.objective,
3737
3748
  rc: _this.setList(_this.responsibilityCentersList, [Number(res === null || res === void 0 ? void 0 : res.rc_id)], 'rc_id'),
3738
- category: ((_e = res === null || res === void 0 ? void 0 : res.program_cat_ids) === null || _e === void 0 ? void 0 : _e.length) ? res === null || res === void 0 ? void 0 : res.category_ids_array.filter(function (ele) { return !res.program_cat_ids.includes(ele); }) : res === null || res === void 0 ? void 0 : res.category_ids_array,
3739
- program_selected_ids: (_f = res === null || res === void 0 ? void 0 : res.category_id.split(',')) !== null && _f !== void 0 ? _f : [],
3740
- category_id: (_g = res === null || res === void 0 ? void 0 : res.category_id) !== null && _g !== void 0 ? _g : '',
3749
+ category: ((_g = res === null || res === void 0 ? void 0 : res.program_cat_ids) === null || _g === void 0 ? void 0 : _g.length) ? res === null || res === void 0 ? void 0 : res.category_ids_array.filter(function (ele) { var _a; return !((_a = res.program_cat_ids) === null || _a === void 0 ? void 0 : _a.includes(ele)); }) : res === null || res === void 0 ? void 0 : res.category_ids_array,
3750
+ program_selected_ids: (_h = res === null || res === void 0 ? void 0 : res.category_id.split(',')) !== null && _h !== void 0 ? _h : [],
3751
+ category_id: (_j = res === null || res === void 0 ? void 0 : res.category_id) !== null && _j !== void 0 ? _j : '',
3741
3752
  linkedProgram: linkage !== null && linkage !== void 0 ? linkage : res === null || res === void 0 ? void 0 : res.linkedProgramDetails,
3742
- program: ((_h = res === null || res === void 0 ? void 0 : res.programDetails) === null || _h === void 0 ? void 0 : _h.category_id) ? [res === null || res === void 0 ? void 0 : res.programDetails] : [],
3753
+ program: ((_k = res === null || res === void 0 ? void 0 : res.programDetails) === null || _k === void 0 ? void 0 : _k.category_id) ? [res === null || res === void 0 ? void 0 : res.programDetails] : [],
3743
3754
  checkpointInstruction: res === null || res === void 0 ? void 0 : res.checkpoint_description,
3744
3755
  customTags: (res === null || res === void 0 ? void 0 : res.custom_tags) ? JSON.parse(res === null || res === void 0 ? void 0 : res.custom_tags) : '',
3745
3756
  checkpoints: (res === null || res === void 0 ? void 0 : res.checkpoint_details) ? JSON.parse(res === null || res === void 0 ? void 0 : res.checkpoint_details) : '',
3746
3757
  reviewers: {
3747
- sequentialWorkflow: (((_k = (_j = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _j === void 0 ? void 0 : _j.level1) === null || _k === void 0 ? void 0 : _k.type) == 'SEQUENTIAL') ? true : false,
3758
+ sequentialWorkflow: (((_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.type) == 'SEQUENTIAL') ? true : false,
3748
3759
  reviewFrequency: {
3749
3760
  reviewCompleteDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
3750
3761
  reviewNOtCompletedDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2
3751
3762
  },
3752
- acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? (_m = (_l = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _l === void 0 ? void 0 : _l.level1) === null || _m === void 0 ? void 0 : _m.reviewers : [],
3753
- list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? _this.setReviewerPayload((_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.reviewers, 'object', (_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.type) : []
3763
+ acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? (_p = (_o = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _o === void 0 ? void 0 : _o.level1) === null || _p === void 0 ? void 0 : _p.reviewers : [],
3764
+ list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? _this.setReviewerPayload((_r = (_q = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _q === void 0 ? void 0 : _q.level1) === null || _r === void 0 ? void 0 : _r.reviewers, 'object', (_t = (_s = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _s === void 0 ? void 0 : _s.level1) === null || _t === void 0 ? void 0 : _t.type) : []
3754
3765
  },
3755
3766
  overseers: {
3756
3767
  list: (res === null || res === void 0 ? void 0 : res.cc_email) ? _this.setList(_this.overseersList, Object.keys(res === null || res === void 0 ? void 0 : res.cc_email).map(Number), 'employee_id') : [],
3757
3768
  notifyList: (res === null || res === void 0 ? void 0 : res.failure_cc_email) ? _this.setList(_this.overseersList, Object.keys(res === null || res === void 0 ? void 0 : res.failure_cc_email).map(Number), 'employee_id') : [],
3758
3769
  },
3759
3770
  formatAndEvidence: {
3760
- formatRequired: ((res === null || res === void 0 ? void 0 : res.report_format.length) > 0 || ((_s = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _s === void 0 ? void 0 : _s.length) > 0) ? true : false,
3771
+ formatRequired: (((_u = res === null || res === void 0 ? void 0 : res.report_format) === null || _u === void 0 ? void 0 : _u.length) > 0 || ((_v = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _v === void 0 ? void 0 : _v.length) > 0) ? true : false,
3761
3772
  formatFiles: res === null || res === void 0 ? void 0 : res.report_format,
3762
3773
  formatLinks: res === null || res === void 0 ? void 0 : res.link_for_details,
3763
3774
  evidenceRequired: (res === null || res === void 0 ? void 0 : res.report_upload_flag) ? true : false,
@@ -3772,9 +3783,9 @@
3772
3783
  _this.populateOverseerData(res);
3773
3784
  _this.populateReviewerData(res);
3774
3785
  }
3775
- _this.selectedProgram = ((_t = res === null || res === void 0 ? void 0 : res.programDetails) === null || _t === void 0 ? void 0 : _t.category_id) ? res.programDetails : undefined;
3776
- if (((_u = _this.selectedProgram) === null || _u === void 0 ? void 0 : _u._id) && ((_v = _this.orgDetails) === null || _v === void 0 ? void 0 : _v.hasProgramFullPermission)) {
3777
- _this.getListsAccordingToProgram((_w = _this.selectedProgram) === null || _w === void 0 ? void 0 : _w._id);
3786
+ _this.selectedProgram = ((_w = res === null || res === void 0 ? void 0 : res.programDetails) === null || _w === void 0 ? void 0 : _w.category_id) ? res.programDetails : undefined;
3787
+ if (((_x = _this.selectedProgram) === null || _x === void 0 ? void 0 : _x._id) && ((_y = _this.orgDetails) === null || _y === void 0 ? void 0 : _y.hasProgramFullPermission)) {
3788
+ _this.getListsAccordingToProgram((_z = _this.selectedProgram) === null || _z === void 0 ? void 0 : _z._id);
3778
3789
  }
3779
3790
  _this.isNotificationPending = res.notification_pending;
3780
3791
  if (_this.isNotificationPending) {
@@ -3798,7 +3809,7 @@
3798
3809
  _this.organizationId = _this.authService.getOrganizationId();
3799
3810
  _this.memberId = _this.authService.getMemberId();
3800
3811
  }
3801
- if ((((_x = _this.responsibilityForm.assignees.list) === null || _x === void 0 ? void 0 : _x.length) === 0 && (!_this.featureFlag_groups || (_this.responsibilityForm.assigneeGroups.list.length === 0 && _this.featureFlag_groups)))) {
3812
+ if ((((_0 = _this.responsibilityForm.assignees.list) === null || _0 === void 0 ? void 0 : _0.length) === 0 && (!_this.featureFlag_groups || (((_2 = (_1 = _this.responsibilityForm) === null || _1 === void 0 ? void 0 : _1.assigneeGroups.list) === null || _2 === void 0 ? void 0 : _2.length) === 0 && _this.featureFlag_groups)))) {
3802
3813
  _this.isEntrust = true;
3803
3814
  _this.mode = 'CREATE';
3804
3815
  _this.assigneeRadioSelect = false;
@@ -3827,7 +3838,7 @@
3827
3838
  frequency_time: ''
3828
3839
  };
3829
3840
  }
3830
- if ((_y = res.assessment) === null || _y === void 0 ? void 0 : _y.assessment_id) {
3841
+ if ((_3 = res.assessment) === null || _3 === void 0 ? void 0 : _3.assessment_id) {
3831
3842
  _this.getAssessmentDetails(res.assessment, res.questionnaire_type);
3832
3843
  }
3833
3844
  if (!_this.responsibilityForm.checkpoints) {
@@ -3970,7 +3981,7 @@
3970
3981
  groupMemberIds = __spreadArray([], __read(new Set(__spreadArray(__spreadArray([], __read(groupMemberIds)), __read(group === null || group === void 0 ? void 0 : group.member_ids)))));
3971
3982
  });
3972
3983
  userList === null || userList === void 0 ? void 0 : userList.forEach(function (ele) {
3973
- if (groupMemberIds === null || groupMemberIds === void 0 ? void 0 : groupMemberIds.includes(ele.my_member_id)) {
3984
+ if (groupMemberIds === null || groupMemberIds === void 0 ? void 0 : groupMemberIds.includes(ele === null || ele === void 0 ? void 0 : ele.my_member_id)) {
3974
3985
  groupUserEmployee.push(ele);
3975
3986
  }
3976
3987
  });
@@ -3979,7 +3990,7 @@
3979
3990
  WorkflowComplianceComponent.prototype.setReviewerPayload = function (ids, type, acceptedData, reviewerType) {
3980
3991
  if (type === 'object') {
3981
3992
  var idObjArray = this.returnIds(ids, 'member_id');
3982
- return this.setList(this.reviewersList, idObjArray, 'my_member_id');
3993
+ return this.setList(this.allUsersList, idObjArray, 'my_member_id');
3983
3994
  }
3984
3995
  else if (type === 'list') {
3985
3996
  var payLoad_1 = [];
@@ -4001,10 +4012,10 @@
4001
4012
  };
4002
4013
  WorkflowComplianceComponent.prototype.checkWhetherAllListsLoaded = function () {
4003
4014
  var _this = this;
4004
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4015
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4005
4016
  if (this.rcListLoaded && this.assigneesListLoaded && this.assignorsListLoaded &&
4006
4017
  this.categoriesListLoaded && this.assuranceCategoryListLoaded && this.groupsListLoaded) {
4007
- if (this.frameworkDetails.length > 0) {
4018
+ if (((_a = this.frameworkDetails) === null || _a === void 0 ? void 0 : _a.length) > 0) {
4008
4019
  this.entrustFramework(this.frameworkDetails[0]);
4009
4020
  }
4010
4021
  if (this.mode === 'EDIT') {
@@ -4016,13 +4027,13 @@
4016
4027
  if (this.selectedProgram) {
4017
4028
  this.responsibilityForm.program.push(this.selectedProgram);
4018
4029
  this.responsibilityForm.program_selected_ids.push(this.selectedProgram.category_id);
4019
- this.responsibilityForm.category_id = (_b = (_a = this.selectedProgram) === null || _a === void 0 ? void 0 : _a.category_id) === null || _b === void 0 ? void 0 : _b.toString();
4020
- if ((_c = this.orgDetails) === null || _c === void 0 ? void 0 : _c.hasProgramFullPermission) {
4021
- this.responsibilityForm.assignees.whoCanComplete = (((_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
4022
- this.responsibilityForm.reviewers.sequentialWorkflow = (((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
4023
- this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f.evidence_upload_flag) ? true : false;
4030
+ this.responsibilityForm.category_id = (_c = (_b = this.selectedProgram) === null || _b === void 0 ? void 0 : _b.category_id) === null || _c === void 0 ? void 0 : _c.toString();
4031
+ if ((_d = this.orgDetails) === null || _d === void 0 ? void 0 : _d.hasProgramFullPermission) {
4032
+ this.responsibilityForm.assignees.whoCanComplete = (((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
4033
+ this.responsibilityForm.reviewers.sequentialWorkflow = (((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
4034
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_g = this.selectedProgram) === null || _g === void 0 ? void 0 : _g.evidence_upload_flag) ? true : false;
4024
4035
  }
4025
- var programCustomTags = ((_g = this.selectedProgram) === null || _g === void 0 ? void 0 : _g.custom_tags) ? JSON.parse(this.selectedProgram.custom_tags) : [];
4036
+ var programCustomTags = ((_h = this.selectedProgram) === null || _h === void 0 ? void 0 : _h.custom_tags) ? JSON.parse(this.selectedProgram.custom_tags) : [];
4026
4037
  programCustomTags.forEach(function (tag) {
4027
4038
  var tagData = JSON.parse(tag);
4028
4039
  var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
@@ -4033,12 +4044,12 @@
4033
4044
  var checkedMoreOptions = [];
4034
4045
  this.moreOptions.PROGRAM = true;
4035
4046
  checkedMoreOptions.push('PROGRAM');
4036
- if (((_h = this.selectedProgram) === null || _h === void 0 ? void 0 : _h.evidence_upload_flag) && ((_j = this.orgDetails) === null || _j === void 0 ? void 0 : _j.hasProgramFullPermission)) {
4047
+ if (((_j = this.selectedProgram) === null || _j === void 0 ? void 0 : _j.evidence_upload_flag) && ((_k = this.orgDetails) === null || _k === void 0 ? void 0 : _k.hasProgramFullPermission)) {
4037
4048
  checkedMoreOptions.push('FORMATE_EVIDENCE');
4038
4049
  this.moreOptions.FORMATE_EVIDENCE = true;
4039
4050
  }
4040
4051
  this.populateOption.emit(checkedMoreOptions);
4041
- this.filterListsAccordingToProgram((_k = this.selectedProgram) === null || _k === void 0 ? void 0 : _k._id);
4052
+ this.filterListsAccordingToProgram((_l = this.selectedProgram) === null || _l === void 0 ? void 0 : _l._id);
4042
4053
  }
4043
4054
  }
4044
4055
  }
@@ -4050,7 +4061,7 @@
4050
4061
  };
4051
4062
  WorkflowComplianceComponent.prototype.saveSelectedList = function (type, selectedItems) {
4052
4063
  var _this = this;
4053
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
4064
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
4054
4065
  switch (type) {
4055
4066
  case 'assignors':
4056
4067
  if (this.invalidType === 'whom') {
@@ -4079,8 +4090,8 @@
4079
4090
  break;
4080
4091
  case 'rc':
4081
4092
  this.responsibilityForm.rc = this.setList(this.responsibilityCentersList, selectedItems, 'item_id');
4082
- this.rcSelected.emit(this.responsibilityForm.rc.length > 0);
4083
- if (this.responsibilityForm.rc.length === 0) {
4093
+ this.rcSelected.emit(((_a = this.responsibilityForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0);
4094
+ if (((_b = this.responsibilityForm.rc) === null || _b === void 0 ? void 0 : _b.length) === 0) {
4084
4095
  this.responsibilityForm.requiresAuditList = [];
4085
4096
  this.responsibilityForm['audit_category_details']['category_id'] = 0;
4086
4097
  }
@@ -4089,7 +4100,7 @@
4089
4100
  this.responsibilityForm.category = selectedItems;
4090
4101
  selectedItems.forEach(function (element) {
4091
4102
  var tag = element.custom_tags !== '' && element.custom_tags !== "null" && element.custom_tags != "[]" ? JSON.parse(element.custom_tags) : [];
4092
- if (tag.length > 0) {
4103
+ if ((tag === null || tag === void 0 ? void 0 : tag.length) > 0) {
4093
4104
  tag.forEach(function (tagData) {
4094
4105
  var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
4095
4106
  if (index == -1) {
@@ -4101,17 +4112,17 @@
4101
4112
  break;
4102
4113
  case 'program':
4103
4114
  this.responsibilityForm.linkedProgram = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.linkedProgram;
4104
- if (this.selectedProgram && !(((_a = this.selectedProgram) === null || _a === void 0 ? void 0 : _a.programType) === 0 && ((_c = (_b = this.selectedProgram) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'uncategorized' || !((_d = this.orgDetails) === null || _d === void 0 ? void 0 : _d.hasProgramFullPermission))) {
4115
+ if (this.selectedProgram && !(((_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.programType) === 0 && ((_e = (_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === 'uncategorized' || !((_f = this.orgDetails) === null || _f === void 0 ? void 0 : _f.hasProgramFullPermission))) {
4105
4116
  this.responsibilityForm.category = (selectedItems.categories) ? selectedItems.categories : [];
4106
- var categoryId = (_e = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _e === void 0 ? void 0 : _e.toString();
4107
- if ((_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _f === void 0 ? void 0 : _f.length) {
4108
- this.responsibilityForm.category_id = ((_g = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _g === void 0 ? void 0 : _g.category_id) + ',' + categoryId;
4117
+ var categoryId = (_g = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _g === void 0 ? void 0 : _g.toString();
4118
+ if ((_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _h === void 0 ? void 0 : _h.length) {
4119
+ this.responsibilityForm.category_id = ((_j = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _j === void 0 ? void 0 : _j.category_id) + ',' + categoryId;
4109
4120
  }
4110
4121
  else {
4111
- this.responsibilityForm.category_id = (_j = (_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _h === void 0 ? void 0 : _h.category_id) === null || _j === void 0 ? void 0 : _j.toString();
4122
+ this.responsibilityForm.category_id = (_l = (_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.category_id) === null || _l === void 0 ? void 0 : _l.toString();
4112
4123
  }
4113
- this.responsibilityForm.program_selected_ids = __spreadArray(__spreadArray([], __read(new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories))), __read(new Set([(_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.category_id])));
4114
- var programCustomTags = ((_l = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _l === void 0 ? void 0 : _l.custom_tags) ? JSON.parse((_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _m === void 0 ? void 0 : _m.custom_tags) : [];
4124
+ this.responsibilityForm.program_selected_ids = __spreadArray(__spreadArray([], __read(new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories))), __read(new Set([(_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _m === void 0 ? void 0 : _m.category_id])));
4125
+ var programCustomTags = ((_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _o === void 0 ? void 0 : _o.custom_tags) ? JSON.parse((_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _p === void 0 ? void 0 : _p.custom_tags) : [];
4115
4126
  programCustomTags === null || programCustomTags === void 0 ? void 0 : programCustomTags.forEach(function (tag) {
4116
4127
  var tagData = typeof tag === "string" ? JSON.parse(tag) : tag;
4117
4128
  var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
@@ -4121,8 +4132,8 @@
4121
4132
  });
4122
4133
  }
4123
4134
  else {
4124
- if ((_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.assessment) {
4125
- ((_q = Object.keys((_p = this.responsibilityForm) === null || _p === void 0 ? void 0 : _p.assessment)) === null || _q === void 0 ? void 0 : _q.length) ? this.getProgramDetails(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program._id) : null;
4135
+ if ((_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.assessment) {
4136
+ ((_s = Object.keys((_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.assessment)) === null || _s === void 0 ? void 0 : _s.length) ? this.getProgramDetails(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program._id) : null;
4126
4137
  }
4127
4138
  this.responsibilityForm.category = (selectedItems.categories) ? selectedItems.categories : [];
4128
4139
  this.responsibilityForm.program = [];
@@ -4130,15 +4141,15 @@
4130
4141
  this.responsibilityForm.program_selected_ids = [];
4131
4142
  this.responsibilityForm.customTags = [];
4132
4143
  this.responsibilityForm.program = (selectedItems.program) ? [selectedItems.program] : [];
4133
- var categoryId = (_r = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _r === void 0 ? void 0 : _r.toString();
4134
- if ((_s = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _s === void 0 ? void 0 : _s.length) {
4135
- this.responsibilityForm.category_id = ((_t = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _t === void 0 ? void 0 : _t.category_id) + ',' + categoryId;
4144
+ var categoryId = (_t = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _t === void 0 ? void 0 : _t.toString();
4145
+ if ((_u = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _u === void 0 ? void 0 : _u.length) {
4146
+ this.responsibilityForm.category_id = ((_v = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _v === void 0 ? void 0 : _v.category_id) + ',' + categoryId;
4136
4147
  }
4137
4148
  else {
4138
- this.responsibilityForm.category_id = (_v = (_u = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _u === void 0 ? void 0 : _u.category_id) === null || _v === void 0 ? void 0 : _v.toString();
4149
+ this.responsibilityForm.category_id = (_x = (_w = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _w === void 0 ? void 0 : _w.category_id) === null || _x === void 0 ? void 0 : _x.toString();
4139
4150
  }
4140
- this.responsibilityForm.program_selected_ids = __spreadArray(__spreadArray([], __read(new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories))), __read(new Set([(_w = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _w === void 0 ? void 0 : _w.category_id])));
4141
- var programCustomTags = ((_x = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _x === void 0 ? void 0 : _x.custom_tags) ? JSON.parse((_y = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _y === void 0 ? void 0 : _y.custom_tags) : [];
4151
+ this.responsibilityForm.program_selected_ids = __spreadArray(__spreadArray([], __read(new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories))), __read(new Set([(_y = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _y === void 0 ? void 0 : _y.category_id])));
4152
+ var programCustomTags = ((_z = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _z === void 0 ? void 0 : _z.custom_tags) ? JSON.parse((_0 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _0 === void 0 ? void 0 : _0.custom_tags) : [];
4142
4153
  programCustomTags === null || programCustomTags === void 0 ? void 0 : programCustomTags.forEach(function (tag) {
4143
4154
  var tagData = typeof tag === "string" ? JSON.parse(tag) : tag;
4144
4155
  var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
@@ -4146,16 +4157,16 @@
4146
4157
  _this.responsibilityForm.customTags.push(tagData);
4147
4158
  }
4148
4159
  });
4149
- if ((_z = this.orgDetails) === null || _z === void 0 ? void 0 : _z.hasProgramFullPermission) {
4150
- this.responsibilityForm.assignees.whoCanComplete = (((_0 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _0 === void 0 ? void 0 : _0.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
4151
- this.responsibilityForm.reviewers.sequentialWorkflow = (((_1 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _1 === void 0 ? void 0 : _1.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
4152
- this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_2 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _2 === void 0 ? void 0 : _2.evidence_upload_flag) ? true : false;
4153
- if ((_3 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _3 === void 0 ? void 0 : _3.evidence_upload_flag) {
4160
+ if ((_1 = this.orgDetails) === null || _1 === void 0 ? void 0 : _1.hasProgramFullPermission) {
4161
+ this.responsibilityForm.assignees.whoCanComplete = (((_2 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _2 === void 0 ? void 0 : _2.default_assignee_type) == 'ANYONE') ? 'ANY_ONE' : 'ALL';
4162
+ this.responsibilityForm.reviewers.sequentialWorkflow = (((_3 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _3 === void 0 ? void 0 : _3.default_reviewers_type) == 'SEQUENTIAL') ? true : false;
4163
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_4 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _4 === void 0 ? void 0 : _4.evidence_upload_flag) ? true : false;
4164
+ if ((_5 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _5 === void 0 ? void 0 : _5.evidence_upload_flag) {
4154
4165
  this.moreOptions.FORMATE_EVIDENCE = true;
4155
4166
  }
4156
4167
  }
4157
- if (!(((_4 = this.selectedProgram) === null || _4 === void 0 ? void 0 : _4.programType) === 0 && ((_6 = (_5 = this.selectedProgram) === null || _5 === void 0 ? void 0 : _5.name) === null || _6 === void 0 ? void 0 : _6.toLowerCase()) === 'uncategorized')) {
4158
- if (((_7 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _7 === void 0 ? void 0 : _7._id) && ((_8 = this.orgDetails) === null || _8 === void 0 ? void 0 : _8.hasProgramFullPermission)) {
4168
+ if (!(((_6 = this.selectedProgram) === null || _6 === void 0 ? void 0 : _6.programType) === 0 && ((_8 = (_7 = this.selectedProgram) === null || _7 === void 0 ? void 0 : _7.name) === null || _8 === void 0 ? void 0 : _8.toLowerCase()) === 'uncategorized')) {
4169
+ if (((_9 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _9 === void 0 ? void 0 : _9._id) && ((_10 = this.orgDetails) === null || _10 === void 0 ? void 0 : _10.hasProgramFullPermission)) {
4159
4170
  this.filterListsAccordingToProgram(selectedItems.program._id);
4160
4171
  }
4161
4172
  else {
@@ -4178,7 +4189,7 @@
4178
4189
  this.saveOverseerData(selectedItems, 'overseerList');
4179
4190
  }
4180
4191
  else {
4181
- this.responsibilityForm.overseers.list = this.setList(this.overseersList, selectedItems, 'employee_id');
4192
+ this.responsibilityForm.overseers.list = this.setList(this.allUsersList, selectedItems, 'employee_id');
4182
4193
  }
4183
4194
  this.callRefreshList();
4184
4195
  break;
@@ -4187,7 +4198,7 @@
4187
4198
  this.saveOverseerData(selectedItems, 'overseerNotifyList');
4188
4199
  }
4189
4200
  else {
4190
- this.responsibilityForm.overseers.notifyList = this.setList(this.overseersList, selectedItems, 'employee_id');
4201
+ this.responsibilityForm.overseers.notifyList = this.setList(this.allUsersList, selectedItems, 'employee_id');
4191
4202
  }
4192
4203
  this.callRefreshList();
4193
4204
  break;
@@ -4207,10 +4218,10 @@
4207
4218
  this.responsibilityForm.riskMatrix = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.riskMatrix;
4208
4219
  break;
4209
4220
  case 'formate_evidence':
4210
- this.responsibilityForm.formatAndEvidence.formatRequired = (_9 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _9 !== void 0 ? _9 : false;
4211
- this.responsibilityForm.formatAndEvidence.formatFiles = (_10 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _10 !== void 0 ? _10 : [];
4212
- this.responsibilityForm.formatAndEvidence.formatLinks = (_11 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _11 !== void 0 ? _11 : [];
4213
- this.responsibilityForm.formatAndEvidence.evidenceRequired = (_12 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _12 !== void 0 ? _12 : false;
4221
+ this.responsibilityForm.formatAndEvidence.formatRequired = (_11 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _11 !== void 0 ? _11 : false;
4222
+ this.responsibilityForm.formatAndEvidence.formatFiles = (_12 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _12 !== void 0 ? _12 : [];
4223
+ this.responsibilityForm.formatAndEvidence.formatLinks = (_13 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _13 !== void 0 ? _13 : [];
4224
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = (_14 = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _14 !== void 0 ? _14 : false;
4214
4225
  break;
4215
4226
  case 'reviewFrequency':
4216
4227
  this.responsibilityForm.reviewers.reviewFrequency = {
@@ -4226,8 +4237,8 @@
4226
4237
  * </code>
4227
4238
  */
4228
4239
  WorkflowComplianceComponent.prototype.callRefreshList = function () {
4229
- var _a;
4230
- if (this.responsibilityForm.program.length && ((_a = this.orgDetails) === null || _a === void 0 ? void 0 : _a.hasProgramFullPermission)) {
4240
+ var _a, _b;
4241
+ if (((_a = this.responsibilityForm.program) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.orgDetails) === null || _b === void 0 ? void 0 : _b.hasProgramFullPermission)) {
4231
4242
  this.refreshListsWhileProgramSelected();
4232
4243
  }
4233
4244
  else {
@@ -4236,12 +4247,13 @@
4236
4247
  };
4237
4248
  WorkflowComplianceComponent.prototype.remove = function (type, event) {
4238
4249
  var _this = this;
4250
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
4239
4251
  switch (type) {
4240
4252
  case 'rc':
4241
4253
  var rcIndex = this.responsibilityForm.rc.findIndex(function (rc) { return rc.rc_id == event.rc_id; });
4242
4254
  this.responsibilityForm.rc.splice(rcIndex, 1);
4243
- this.rcSelected.emit(this.responsibilityForm.rc.length > 0);
4244
- if (this.responsibilityForm.rc.length === 0) {
4255
+ this.rcSelected.emit(((_a = this.responsibilityForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0);
4256
+ if (((_b = this.responsibilityForm.rc) === null || _b === void 0 ? void 0 : _b.length) === 0) {
4245
4257
  this.responsibilityForm.requiresAuditList = [];
4246
4258
  this.responsibilityForm['audit_category_details']['category_id'] = 0;
4247
4259
  }
@@ -4251,12 +4263,12 @@
4251
4263
  this.callRefreshList();
4252
4264
  break;
4253
4265
  case 'assignees':
4254
- var entrustIndex = this.responsibilityForm.assignees.list.findIndex(function (owner) { return owner.employee_id == event.employee_id; });
4266
+ var entrustIndex = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assignees) === null || _d === void 0 ? void 0 : _d.list.findIndex(function (owner) { return owner.employee_id == event.employee_id; });
4255
4267
  this.responsibilityForm.assignees.list.splice(entrustIndex, 1);
4256
4268
  this.callRefreshList();
4257
4269
  break;
4258
4270
  case 'groupassignees':
4259
- var groupIndex = this.responsibilityForm.assigneeGroups.list.findIndex(function (group) { return group.group_id == event.group_id; });
4271
+ var groupIndex = (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.assigneeGroups) === null || _f === void 0 ? void 0 : _f.list.findIndex(function (group) { return group.group_id == event.group_id; });
4260
4272
  this.responsibilityForm.assigneeGroups.list.splice(groupIndex, 1);
4261
4273
  this.callRefreshList();
4262
4274
  break;
@@ -4266,27 +4278,27 @@
4266
4278
  this.callRefreshList();
4267
4279
  break;
4268
4280
  case 'groupReviewer':
4269
- var groupReviewerIndex = this.responsibilityForm.groupReviewers.list.findIndex(function (reviewer) { return reviewer.group_id == event.group_id; });
4281
+ var groupReviewerIndex = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list.findIndex(function (reviewer) { return reviewer.group_id == event.group_id; });
4270
4282
  this.responsibilityForm.groupReviewers.list.splice(groupReviewerIndex, 1);
4271
4283
  this.callRefreshList();
4272
4284
  break;
4273
4285
  case 'overseer':
4274
- var overseerIndex = this.responsibilityForm.overseers.list.findIndex(function (overseer) { return overseer.employee_id == event.employee_id; });
4286
+ var overseerIndex = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.overseers) === null || _k === void 0 ? void 0 : _k.list.findIndex(function (overseer) { return overseer.employee_id == event.employee_id; });
4275
4287
  this.responsibilityForm.overseers.list.splice(overseerIndex, 1);
4276
4288
  this.callRefreshList();
4277
4289
  break;
4278
4290
  case 'overseerGroup':
4279
- var overseerGroupIndex = this.responsibilityForm.overseersGroups.list.findIndex(function (overseer) { return overseer.group_id == event.group_id; });
4291
+ var overseerGroupIndex = (_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list.findIndex(function (overseer) { return overseer.group_id == event.group_id; });
4280
4292
  this.responsibilityForm.overseersGroups.list.splice(overseerGroupIndex, 1);
4281
4293
  this.callRefreshList();
4282
4294
  break;
4283
4295
  case 'overseerNotifyList':
4284
- var overseerNotifyIndex = this.responsibilityForm.overseers.notifyList.findIndex(function (overseerN) { return overseerN.employee_id == event.employee_id; });
4296
+ var overseerNotifyIndex = (_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseers) === null || _p === void 0 ? void 0 : _p.notifyList.findIndex(function (overseerN) { return overseerN.employee_id == event.employee_id; });
4285
4297
  this.responsibilityForm.overseers.notifyList.splice(overseerNotifyIndex, 1);
4286
4298
  this.callRefreshList();
4287
4299
  break;
4288
4300
  case 'overseerGroupNotifyList':
4289
- var overseerGroupNotifyIndex = this.responsibilityForm.overseersGroups.notifyList.findIndex(function (overseerN) { return overseerN.group_id == event.group_id; });
4301
+ var overseerGroupNotifyIndex = (_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList.findIndex(function (overseerN) { return overseerN.group_id == event.group_id; });
4290
4302
  this.responsibilityForm.overseersGroups.notifyList.splice(overseerGroupNotifyIndex, 1);
4291
4303
  this.callRefreshList();
4292
4304
  break;
@@ -4294,7 +4306,7 @@
4294
4306
  var categoryIndex = this.responsibilityForm.category.findIndex(function (category) { return category.category_id == event.category_id; });
4295
4307
  this.responsibilityForm.category.splice(categoryIndex, 1);
4296
4308
  var tag = JSON.parse(event.custom_tags);
4297
- if (tag.length > 0) {
4309
+ if ((tag === null || tag === void 0 ? void 0 : tag.length) > 0) {
4298
4310
  tag.forEach(function (tagData) {
4299
4311
  var indexCT = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
4300
4312
  if (indexCT != -1) {
@@ -4302,10 +4314,10 @@
4302
4314
  }
4303
4315
  });
4304
4316
  }
4305
- if (this.responsibilityForm.category.length > 0) {
4317
+ if (((_s = this.responsibilityForm.category) === null || _s === void 0 ? void 0 : _s.length) > 0) {
4306
4318
  this.responsibilityForm.category.forEach(function (element) {
4307
4319
  var tag = JSON.parse(element.custom_tags);
4308
- if (tag.length > 0) {
4320
+ if ((tag === null || tag === void 0 ? void 0 : tag.length) > 0) {
4309
4321
  tag.forEach(function (tagData) {
4310
4322
  var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
4311
4323
  if (index == -1) {
@@ -4384,7 +4396,7 @@
4384
4396
  }
4385
4397
  };
4386
4398
  WorkflowComplianceComponent.prototype.entrustFramework = function (event) {
4387
- var _a, _b, _c, _d;
4399
+ var _a, _b, _c, _d, _e, _f;
4388
4400
  this.reset();
4389
4401
  this.activeDeselector();
4390
4402
  this.responsibilityForm.responsibility = {
@@ -4431,7 +4443,7 @@
4431
4443
  evidenceRequired: event.report_upload_flag ? true : false,
4432
4444
  formatFiles: event.report_format,
4433
4445
  formatLinks: !(event.report_format_link) || event.report_format_link == '' ? [] : [event.report_format_link],
4434
- formatRequired: (event.report_format.length > 0 || ((event.report_format_link) && event.report_format_link != '')) ? true : false
4446
+ formatRequired: (((_a = event.report_format) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((event.report_format_link) && event.report_format_link != '')) ? true : false
4435
4447
  };
4436
4448
  this.responsibilityForm.audit_category_details = {
4437
4449
  category_id: 0,
@@ -4456,11 +4468,11 @@
4456
4468
  }
4457
4469
  checkedMoreOptions.push('RISK_CLASSIFICATION');
4458
4470
  this.moreOptions.RISK_CLASSIFICATION = true;
4459
- if (this.responsibilityForm.category.length > 0) {
4471
+ if (((_b = this.responsibilityForm.category) === null || _b === void 0 ? void 0 : _b.length) > 0) {
4460
4472
  checkedMoreOptions.push('CATEGORY');
4461
4473
  this.moreOptions.CATEGORY = true;
4462
4474
  }
4463
- if (((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.formatAndEvidence) === null || _b === void 0 ? void 0 : _b.evidenceRequired) || ((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.formatAndEvidence) === null || _d === void 0 ? void 0 : _d.formatRequired)) {
4475
+ if (((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.formatAndEvidence) === null || _d === void 0 ? void 0 : _d.evidenceRequired) || ((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.formatAndEvidence) === null || _f === void 0 ? void 0 : _f.formatRequired)) {
4464
4476
  checkedMoreOptions.push('FORMATE_EVIDENCE');
4465
4477
  this.moreOptions.FORMATE_EVIDENCE = true;
4466
4478
  }
@@ -4525,20 +4537,26 @@
4525
4537
  WorkflowComplianceComponent.prototype.assignUserMemberId = function (list) {
4526
4538
  var userObj = __spreadArray([], __read(list));
4527
4539
  userObj === null || userObj === void 0 ? void 0 : userObj.forEach(function (user) {
4528
- user.member_id = user.my_member_id;
4540
+ user.member_id = user === null || user === void 0 ? void 0 : user.my_member_id;
4529
4541
  });
4530
4542
  list = __spreadArray([], __read(userObj));
4531
4543
  return list;
4532
4544
  };
4533
4545
  WorkflowComplianceComponent.prototype.refreshAllLists = function () {
4534
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
4546
+ var _this = this;
4547
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
4535
4548
  var assignorAndAssigneesIds = [];
4549
+ var allUsersIds = [];
4536
4550
  var assigneeGroupIds = [];
4537
4551
  var reviewersIds = [];
4538
4552
  var overseerIds = [];
4539
4553
  var assigneeIds = [];
4540
4554
  var groupReviewerIds = [];
4541
4555
  var groupOverseerIds = [];
4556
+ this.reviewerIds = [];
4557
+ this.assignorId = [];
4558
+ this.overseerIds = [];
4559
+ this.assigneeIds = [];
4542
4560
  var allUsers = lodash.cloneDeep(this.allUsersList);
4543
4561
  var allGroups = lodash.cloneDeep(this.OrgGroup);
4544
4562
  var behalfUsers = lodash.cloneDeep(this.behalfOfUsersList);
@@ -4553,55 +4571,87 @@
4553
4571
  var groupNotifyOverseers = this.featureFlag_groups ? lodash.cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList) : [];
4554
4572
  assignors === null || assignors === void 0 ? void 0 : assignors.forEach(function (user) {
4555
4573
  assignorAndAssigneesIds.push(user.member_id);
4574
+ _this.assignorId.push(user.member_id);
4556
4575
  });
4557
4576
  assignees === null || assignees === void 0 ? void 0 : assignees.forEach(function (user) {
4558
- assignorAndAssigneesIds.push(user.my_member_id);
4559
- assigneeIds.push(user.my_member_id);
4577
+ assignorAndAssigneesIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4578
+ assigneeIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4579
+ _this.assigneeIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4560
4580
  });
4561
- if (this.responsibilityForm.assignors.list.length == 0) {
4581
+ if (((_s = this.responsibilityForm.assignors.list) === null || _s === void 0 ? void 0 : _s.length) == 0) {
4562
4582
  assignorAndAssigneesIds.push(this.memberId);
4583
+ this.assignorId.push(this.memberId);
4563
4584
  }
4585
+ allUsers === null || allUsers === void 0 ? void 0 : allUsers.forEach(function (user) {
4586
+ allUsersIds.push((user === null || user === void 0 ? void 0 : user.my_member_id));
4587
+ });
4564
4588
  assigneeGroupList === null || assigneeGroupList === void 0 ? void 0 : assigneeGroupList.forEach(function (group) {
4565
- assigneeGroupIds.push(group.group_id);
4589
+ assigneeGroupIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4566
4590
  });
4567
4591
  reviewers === null || reviewers === void 0 ? void 0 : reviewers.forEach(function (user) {
4568
- reviewersIds.push(user.my_member_id);
4592
+ reviewersIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4593
+ _this.reviewerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4569
4594
  });
4570
4595
  groupReviewersList === null || groupReviewersList === void 0 ? void 0 : groupReviewersList.forEach(function (group) {
4571
- groupReviewerIds.push(group.group_id);
4596
+ groupReviewerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4572
4597
  });
4573
4598
  groupOverseerList === null || groupOverseerList === void 0 ? void 0 : groupOverseerList.forEach(function (group) {
4574
- groupOverseerIds.push(group.group_id);
4599
+ groupOverseerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4575
4600
  });
4576
4601
  groupNotifyOverseers === null || groupNotifyOverseers === void 0 ? void 0 : groupNotifyOverseers.forEach(function (group) {
4577
- groupOverseerIds.push(group.group_id);
4602
+ groupOverseerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4578
4603
  });
4579
4604
  overseerList === null || overseerList === void 0 ? void 0 : overseerList.forEach(function (user) {
4580
- overseerIds.push(user.my_member_id);
4605
+ overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4606
+ _this.overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4581
4607
  });
4582
4608
  notifyOverseers === null || notifyOverseers === void 0 ? void 0 : notifyOverseers.forEach(function (user) {
4583
- overseerIds.push(user.my_member_id);
4609
+ overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4610
+ _this.overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4584
4611
  });
4585
4612
  assignorAndAssigneesIds = __spreadArray([], __read(new Set(assignorAndAssigneesIds)));
4613
+ allUsersIds = __spreadArray([], __read(new Set(allUsersIds)));
4586
4614
  assigneeIds = __spreadArray([], __read(new Set(assigneeIds)));
4587
4615
  reviewersIds = __spreadArray([], __read(new Set(reviewersIds)));
4588
4616
  overseerIds = __spreadArray([], __read(new Set(overseerIds)));
4617
+ this.assignorId = __spreadArray([], __read(new Set(this.assignorId)));
4618
+ this.assigneeIds = __spreadArray([], __read(new Set(this.assigneeIds)));
4619
+ this.reviewerIds = __spreadArray([], __read(new Set(this.reviewerIds)));
4620
+ this.overseerIds = __spreadArray([], __read(new Set(this.overseerIds)));
4589
4621
  assigneeGroupIds = __spreadArray([], __read(new Set(assigneeGroupIds)));
4590
4622
  groupReviewerIds = __spreadArray([], __read(new Set(groupReviewerIds)));
4591
4623
  groupOverseerIds = __spreadArray([], __read(new Set(groupOverseerIds)));
4592
- this.assignorsList = behalfUsers.filter(function (user) { return !(overseerIds.includes(user.member_id)); });
4593
- this.assigneesList = allUsers.filter(function (user) { return !(reviewersIds.includes(user.my_member_id) || overseerIds.includes(user.my_member_id)); });
4594
- this.reviewersList = allUsers.filter(function (user) { return !(overseerIds.includes(user.my_member_id) || assigneeIds.includes(user.my_member_id)); });
4595
- this.overseersList = allUsers.filter(function (user) { return !(assignorAndAssigneesIds.includes(user.my_member_id) || reviewersIds.includes(user.my_member_id)); });
4624
+ this.assignorsList = behalfUsers.filter(function (user) { return !(overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user.member_id)); });
4625
+ this.assigneesList = allUsers.filter(function (user) { return !((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4626
+ this.reviewersList = allUsers.filter(function (user) { return !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4627
+ this.overseersList = allUsers.filter(function (user) { return !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4628
+ this.disableList(allUsers, assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds);
4596
4629
  if (this.featureFlag_groups) {
4597
- this.groupAssigneeList = allGroups.filter(function (group) { return !(groupReviewerIds.includes(group.group_id) || groupOverseerIds.includes(group.group_id)); });
4598
- this.reviewerMemberIdsList = this.assignUserMemberId(this.reviewersList);
4599
- this.groupReviewerList = allGroups.filter(function (group) { return !(groupOverseerIds.includes(group.group_id) || assigneeGroupIds.includes(group.group_id)); });
4600
- this.overseersList = this.assignUserMemberId(this.overseersList);
4601
- this.groupOverseerList = allGroups.filter(function (group) { return !(assigneeGroupIds.includes(group.group_id) || groupReviewerIds.includes(group.group_id)); });
4630
+ this.groupAssigneeList = allGroups.filter(function (group) { return !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4631
+ this.reviewerMemberIdsList = this.assignUserMemberId(this.allUsersList);
4632
+ this.overseersList = this.assignUserMemberId(this.allUsersList);
4633
+ this.groupReviewerList = allGroups.filter(function (group) { return !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4634
+ this.groupOverseerList = allGroups.filter(function (group) { return !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4635
+ }
4636
+ };
4637
+ WorkflowComplianceComponent.prototype.disableList = function (allUsers, assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds) {
4638
+ var disableAssigneeList = allUsers.filter(function (user) { return ((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4639
+ this.disableAssigneeIds = this.returnIds(disableAssigneeList, 'my_member_id');
4640
+ this.disableRadioAssignee = this.returnIds(disableAssigneeList, 'employee_id');
4641
+ var disableReviewerList = allUsers.filter(function (user) { return ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4642
+ this.disableReviewerIds = this.returnIds(disableReviewerList, 'employee_id');
4643
+ var disableOverseerList = allUsers.filter(function (user) { return ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4644
+ this.disableOverseerIds = this.returnIds(disableOverseerList, 'employee_id');
4645
+ if (this.featureFlag_groups) {
4646
+ var disableReviewerList_1 = allUsers.filter(function (user) { return ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4647
+ this.disableReviewerIds = this.returnIds(disableReviewerList_1, 'member_id');
4648
+ var disableOverseersList = allUsers.filter(function (user) { return ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4649
+ this.disableOverseerIds = this.returnIds(disableOverseersList, 'member_id');
4602
4650
  }
4603
4651
  };
4604
4652
  WorkflowComplianceComponent.prototype.refreshListsWhileProgramSelected = function () {
4653
+ var _this = this;
4654
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
4605
4655
  var assignorAndAssigneesIds = [];
4606
4656
  var reviewersIds = [];
4607
4657
  var overseerIds = [];
@@ -4609,47 +4659,57 @@
4609
4659
  var assigneeGroupIds = [];
4610
4660
  var groupReviewerIds = [];
4611
4661
  var groupOverseerIds = [];
4662
+ this.reviewerIds = [];
4663
+ this.assignorId = [];
4664
+ this.overseerIds = [];
4665
+ this.assigneeIds = [];
4612
4666
  var behalfUsers = lodash.cloneDeep(this.behalfOfUsersList);
4613
4667
  var allGroups = lodash.cloneDeep(this.OrgGroup);
4614
4668
  var assignors = lodash.cloneDeep(this.responsibilityForm.assignors.list);
4615
- var assignees = lodash.cloneDeep(this.responsibilityForm.assignees.list);
4616
- var assigneeGroupList = this.featureFlag_groups ? lodash.cloneDeep(this.responsibilityForm.assigneeGroups.list) : [];
4617
- var reviewers = lodash.cloneDeep(this.responsibilityForm.reviewers.list);
4618
- var groupReviewersList = this.featureFlag_groups ? lodash.cloneDeep(this.responsibilityForm.groupReviewers.list) : [];
4619
- var overseerList = lodash.cloneDeep(this.responsibilityForm.overseers.list);
4620
- var groupOverseerList = this.featureFlag_groups ? lodash.cloneDeep(this.responsibilityForm.overseersGroups.list) : [];
4621
- var notifyOverseers = lodash.cloneDeep(this.responsibilityForm.overseers.notifyList);
4622
- var groupNotifyOverseers = this.featureFlag_groups ? lodash.cloneDeep(this.responsibilityForm.overseersGroups.notifyList) : [];
4669
+ var assignees = lodash.cloneDeep((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assignees) === null || _b === void 0 ? void 0 : _b.list);
4670
+ var assigneeGroupList = this.featureFlag_groups ? lodash.cloneDeep((_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assigneeGroups) === null || _d === void 0 ? void 0 : _d.list) : [];
4671
+ var reviewers = lodash.cloneDeep((_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.reviewers) === null || _f === void 0 ? void 0 : _f.list);
4672
+ var groupReviewersList = this.featureFlag_groups ? lodash.cloneDeep((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewers) === null || _h === void 0 ? void 0 : _h.list) : [];
4673
+ var overseerList = lodash.cloneDeep((_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.overseers) === null || _k === void 0 ? void 0 : _k.list);
4674
+ var groupOverseerList = this.featureFlag_groups ? lodash.cloneDeep((_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseersGroups) === null || _m === void 0 ? void 0 : _m.list) : [];
4675
+ var notifyOverseers = lodash.cloneDeep((_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseers) === null || _p === void 0 ? void 0 : _p.notifyList);
4676
+ var groupNotifyOverseers = this.featureFlag_groups ? lodash.cloneDeep((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.notifyList) : [];
4623
4677
  assignors === null || assignors === void 0 ? void 0 : assignors.forEach(function (user) {
4624
- assignorAndAssigneesIds.push(user.member_id);
4678
+ _this.assignorId.push(user === null || user === void 0 ? void 0 : user.member_id);
4679
+ assignorAndAssigneesIds.push(user === null || user === void 0 ? void 0 : user.member_id);
4625
4680
  });
4626
4681
  assignees === null || assignees === void 0 ? void 0 : assignees.forEach(function (user) {
4627
- assignorAndAssigneesIds.push(user.my_member_id);
4628
- assigneeIds.push(user.my_member_id);
4682
+ assignorAndAssigneesIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4683
+ assigneeIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4684
+ _this.assigneeIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4629
4685
  });
4630
- if (this.responsibilityForm.assignors.list.length == 0) {
4686
+ if (((_u = (_t = (_s = this.responsibilityForm) === null || _s === void 0 ? void 0 : _s.assignors) === null || _t === void 0 ? void 0 : _t.list) === null || _u === void 0 ? void 0 : _u.length) == 0) {
4631
4687
  assignorAndAssigneesIds.push(this.memberId);
4688
+ this.assignorId.push(this.memberId);
4632
4689
  }
4633
4690
  assigneeGroupList === null || assigneeGroupList === void 0 ? void 0 : assigneeGroupList.forEach(function (group) {
4634
- assigneeGroupIds.push(group.group_id);
4691
+ assigneeGroupIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4635
4692
  });
4636
4693
  reviewers === null || reviewers === void 0 ? void 0 : reviewers.forEach(function (user) {
4637
- reviewersIds.push(user.my_member_id);
4694
+ reviewersIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4695
+ _this.reviewerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4638
4696
  });
4639
4697
  groupReviewersList === null || groupReviewersList === void 0 ? void 0 : groupReviewersList.forEach(function (group) {
4640
- groupReviewerIds.push(group.group_id);
4698
+ groupReviewerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4641
4699
  });
4642
4700
  overseerList === null || overseerList === void 0 ? void 0 : overseerList.forEach(function (user) {
4643
- overseerIds.push(user.my_member_id);
4701
+ overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4702
+ _this.overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4644
4703
  });
4645
4704
  notifyOverseers === null || notifyOverseers === void 0 ? void 0 : notifyOverseers.forEach(function (user) {
4646
- overseerIds.push(user.my_member_id);
4705
+ overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4706
+ _this.overseerIds.push(user === null || user === void 0 ? void 0 : user.my_member_id);
4647
4707
  });
4648
4708
  groupOverseerList === null || groupOverseerList === void 0 ? void 0 : groupOverseerList.forEach(function (group) {
4649
- groupOverseerIds.push(group.group_id);
4709
+ groupOverseerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4650
4710
  });
4651
4711
  groupNotifyOverseers === null || groupNotifyOverseers === void 0 ? void 0 : groupNotifyOverseers.forEach(function (group) {
4652
- groupOverseerIds.push(group.group_id);
4712
+ groupOverseerIds.push(group === null || group === void 0 ? void 0 : group.group_id);
4653
4713
  });
4654
4714
  assignorAndAssigneesIds = __spreadArray([], __read(new Set(assignorAndAssigneesIds)));
4655
4715
  assigneeIds = __spreadArray([], __read(new Set(assigneeIds)));
@@ -4658,16 +4718,37 @@
4658
4718
  assigneeGroupIds = __spreadArray([], __read(new Set(assigneeGroupIds)));
4659
4719
  groupReviewerIds = __spreadArray([], __read(new Set(groupReviewerIds)));
4660
4720
  groupOverseerIds = __spreadArray([], __read(new Set(groupOverseerIds)));
4661
- this.assignorsList = behalfUsers.filter(function (user) { return !(overseerIds.includes(user.member_id)); });
4662
- this.assigneesList = this.programPeopleList.assigneesList.filter(function (user) { return !(reviewersIds.includes(user.my_member_id) || overseerIds.includes(user.my_member_id)); });
4663
- this.reviewersList = this.programPeopleList.reviewersList.filter(function (user) { return !(overseerIds.includes(user.my_member_id) || assigneeIds.includes(user.my_member_id)); });
4664
- this.overseersList = this.programPeopleList.overseersList.filter(function (user) { return !(assignorAndAssigneesIds.includes(user.my_member_id) || reviewersIds.includes(user.my_member_id)); });
4721
+ this.assignorId = __spreadArray([], __read(new Set(this.assignorId)));
4722
+ this.assigneeIds = __spreadArray([], __read(new Set(this.assigneeIds)));
4723
+ this.reviewerIds = __spreadArray([], __read(new Set(this.reviewerIds)));
4724
+ this.overseerIds = __spreadArray([], __read(new Set(this.overseerIds)));
4725
+ this.assignorsList = behalfUsers.filter(function (user) { return !(overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user.member_id)); });
4726
+ this.assigneesList = (_v = this.programPeopleList) === null || _v === void 0 ? void 0 : _v.assigneesList.filter(function (user) { return !((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4727
+ this.reviewersList = (_w = this.programPeopleList) === null || _w === void 0 ? void 0 : _w.reviewersList.filter(function (user) { return !((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4728
+ this.overseersList = (_x = this.programPeopleList) === null || _x === void 0 ? void 0 : _x.overseersList.filter(function (user) { return !((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4665
4729
  if (this.featureFlag_groups) {
4666
- this.groupAssigneeList = allGroups.filter(function (group) { return !(groupReviewerIds.includes(group.group_id) || groupOverseerIds.includes(group.group_id)); });
4667
- this.reviewerMemberIdsList = this.assignUserMemberId(this.reviewersList);
4668
- this.groupReviewerList = allGroups.filter(function (group) { return !(groupOverseerIds.includes(group.group_id) || assigneeGroupIds.includes(group.group_id)); });
4669
- this.overseersList = this.assignUserMemberId(this.overseersList);
4670
- this.groupOverseerList = allGroups.filter(function (group) { return !(assigneeGroupIds.includes(group.group_id) || groupReviewerIds.includes(group.group_id)); });
4730
+ this.groupAssigneeList = allGroups.filter(function (group) { return !((groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4731
+ this.reviewerMemberIdsList = this.assignUserMemberId(this.programPeopleList.reviewersList);
4732
+ this.groupReviewerList = allGroups.filter(function (group) { return !((groupOverseerIds === null || groupOverseerIds === void 0 ? void 0 : groupOverseerIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4733
+ this.overseersList = this.assignUserMemberId(this.programPeopleList.overseersList);
4734
+ this.groupOverseerList = allGroups.filter(function (group) { return !((assigneeGroupIds === null || assigneeGroupIds === void 0 ? void 0 : assigneeGroupIds.includes(group === null || group === void 0 ? void 0 : group.group_id)) || (groupReviewerIds === null || groupReviewerIds === void 0 ? void 0 : groupReviewerIds.includes(group === null || group === void 0 ? void 0 : group.group_id))); });
4735
+ }
4736
+ this.disableProgramList(assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds);
4737
+ };
4738
+ WorkflowComplianceComponent.prototype.disableProgramList = function (assignorAndAssigneesIds, assigneeIds, reviewersIds, overseerIds) {
4739
+ var _a, _b, _c;
4740
+ var disableAssigneeList = (_a = this.programPeopleList) === null || _a === void 0 ? void 0 : _a.assigneesList.filter(function (user) { return ((reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4741
+ this.disableAssigneeIds = this.returnIds(disableAssigneeList, 'my_member_id');
4742
+ this.disableRadioAssignee = this.returnIds(disableAssigneeList, 'employee_id');
4743
+ var disableReviewerList = (_b = this.programPeopleList) === null || _b === void 0 ? void 0 : _b.reviewersList.filter(function (user) { return ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4744
+ this.disableReviewerIds = this.returnIds(disableReviewerList, 'employee_id');
4745
+ var disableOverseerList = (_c = this.programPeopleList) === null || _c === void 0 ? void 0 : _c.overseersList.filter(function (user) { return ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4746
+ this.disableOverseerIds = this.returnIds(disableOverseerList, 'employee_id');
4747
+ if (this.featureFlag_groups) {
4748
+ var disableReviewerList_2 = this.reviewerMemberIdsList.filter(function (user) { return ((overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4749
+ this.disableReviewerIds = this.returnIds(disableReviewerList_2, 'member_id');
4750
+ var disableOverseerList_1 = this.overseersList.filter(function (user) { return ((assignorAndAssigneesIds === null || assignorAndAssigneesIds === void 0 ? void 0 : assignorAndAssigneesIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id)) || (reviewersIds === null || reviewersIds === void 0 ? void 0 : reviewersIds.includes(user === null || user === void 0 ? void 0 : user.my_member_id))); });
4751
+ this.disableOverseerIds = this.returnIds(disableOverseerList_1, 'member_id');
4671
4752
  }
4672
4753
  };
4673
4754
  /**
@@ -4699,15 +4780,16 @@
4699
4780
  * then return false. Otherwise, return true.
4700
4781
  */
4701
4782
  WorkflowComplianceComponent.prototype.validateResponsibility = function () {
4783
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4702
4784
  this.submitted = true;
4703
- if (this.responsibilityForm.assignors.enable && this.responsibilityForm.assignors.list.length === 0) {
4785
+ if (this.responsibilityForm.assignors.enable && ((_a = this.responsibilityForm.assignors.list) === null || _a === void 0 ? void 0 : _a.length) === 0) {
4704
4786
  this.invalidType = "whom";
4705
4787
  return;
4706
4788
  }
4707
4789
  if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == '') {
4708
4790
  this.invalidType = 'what';
4709
4791
  }
4710
- else if (!this.responsibilityForm.assignees.list || this.responsibilityForm.assignees.list.length == 0 && (!this.featureFlag_groups || ((!this.responsibilityForm.assigneeGroups.list || this.responsibilityForm.assigneeGroups.list.length == 0) && this.featureFlag_groups))) {
4792
+ else if (!((_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.assignees) === null || _c === void 0 ? void 0 : _c.list) || ((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.assignees) === null || _e === void 0 ? void 0 : _e.list) === null || _f === void 0 ? void 0 : _f.length) == 0 && (!this.featureFlag_groups || ((!((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.assigneeGroups) === null || _h === void 0 ? void 0 : _h.list) || ((_l = (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.assigneeGroups) === null || _k === void 0 ? void 0 : _k.list) === null || _l === void 0 ? void 0 : _l.length) == 0) && this.featureFlag_groups))) {
4711
4793
  this.invalidType = 'who';
4712
4794
  }
4713
4795
  else if (!this.responsibilityForm.frequency || this.responsibilityForm.frequency == '' || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') {
@@ -4717,7 +4799,7 @@
4717
4799
  this.invalidType = '';
4718
4800
  }
4719
4801
  if (!this.responsibilityForm.responsibility.name || this.responsibilityForm.responsibility.name.trim() == ''
4720
- || (!this.responsibilityForm.frequency || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') || (this.responsibilityForm.assignees.list.length == 0 && (!this.featureFlag_groups || ((!this.responsibilityForm.assigneeGroups.list || this.responsibilityForm.assigneeGroups.list.length == 0) && this.featureFlag_groups)))) {
4802
+ || (!this.responsibilityForm.frequency || this.responsibilityForm.frequency === '' || this.responsibilityForm.frequency === '5~0~0~0') || (((_m = this.responsibilityForm.assignees.list) === null || _m === void 0 ? void 0 : _m.length) == 0 && (!this.featureFlag_groups || ((!this.responsibilityForm.assigneeGroups.list || ((_o = this.responsibilityForm.assigneeGroups.list) === null || _o === void 0 ? void 0 : _o.length) == 0) && this.featureFlag_groups)))) {
4721
4803
  return false;
4722
4804
  }
4723
4805
  else {
@@ -4726,12 +4808,12 @@
4726
4808
  };
4727
4809
  WorkflowComplianceComponent.prototype.entrustResponsibility = function (entrustForm) {
4728
4810
  var _this = this;
4729
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
4811
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
4730
4812
  this.loader = true;
4731
4813
  this.uiKitService.isLoader = true;
4732
4814
  var startDate = moment__namespace(parseInt(entrustForm.startDate) * 1000).format("YYYY-MM-DD HH:mm:ss");
4733
4815
  startDate = moment__namespace(startDate.split(' ')[0] + " 00:00:00").format("YYYY-MM-DD HH:mm:ss");
4734
- var rcDetails = entrustForm.rc.length > 0 ? entrustForm.rc.map(function (rc) {
4816
+ var rcDetails = ((_a = entrustForm.rc) === null || _a === void 0 ? void 0 : _a.length) > 0 ? entrustForm.rc.map(function (rc) {
4735
4817
  if (rc) {
4736
4818
  var rcDetailsArr = {
4737
4819
  parent_rc_ids: rc.parent_rc_ids,
@@ -4752,7 +4834,7 @@
4752
4834
  };
4753
4835
  var linkedProgramIds = [];
4754
4836
  var linkedCategoryIds = [];
4755
- (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.linkedProgram) === null || _b === void 0 ? void 0 : _b.forEach(function (ele) {
4837
+ (_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.linkedProgram) === null || _c === void 0 ? void 0 : _c.forEach(function (ele) {
4756
4838
  var _a, _b, _c;
4757
4839
  if (((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.category_id) !== (ele === null || ele === void 0 ? void 0 : ele.category_id)) {
4758
4840
  var program = {
@@ -4768,7 +4850,7 @@
4768
4850
  }
4769
4851
  });
4770
4852
  var categoryIdsExceptDefault = [];
4771
- categoryIdsExceptDefault = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.category) === null || _d === void 0 ? void 0 : _d.filter(function (el) {
4853
+ categoryIdsExceptDefault = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.category) === null || _e === void 0 ? void 0 : _e.filter(function (el) {
4772
4854
  var _a, _b, _c, _d, _e;
4773
4855
  return (el !== ((_b = (_a = _this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program[0]) === null || _b === void 0 ? void 0 : _b.category_id) && !((_e = (_d = (_c = _this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.program[0]) === null || _d === void 0 ? void 0 : _d.child_id) === null || _e === void 0 ? void 0 : _e.includes(el)));
4774
4856
  });
@@ -4778,11 +4860,11 @@
4778
4860
  var payload = {
4779
4861
  app_association: [],
4780
4862
  assigned_to: this.returnIds(this.assigneeUserList, 'employee_id').toString(),
4781
- program_cat_ids: (moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.PROGRAM) ? (((_e = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _e === void 0 ? void 0 : _e.length) ? [entrustForm.program[0].category_id] : []) : [],
4863
+ program_cat_ids: (moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.PROGRAM) ? (((_f = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _f === void 0 ? void 0 : _f.length) ? [entrustForm.program[0].category_id] : []) : [],
4782
4864
  linked_program_ids: linkedProgramIds,
4783
4865
  linked_category_ids: this.getUniqueIds(__spreadArray(__spreadArray([], __read(categoryIdsExceptDefault)), __read(linkedCategoryIds))),
4784
4866
  // category_id: (this.responsibilityForm?.program_selected_ids?.length > 0) ? this.responsibilityForm?.category_id : '',
4785
- category_id: (((_g = (_f = this.responsibilityForm) === null || _f === void 0 ? void 0 : _f.program_selected_ids) === null || _g === void 0 ? void 0 : _g.length) > 0) ? (_j = this.getUniqueIds(__spreadArray(__spreadArray(__spreadArray([], __read((_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.category)), __read(linkedCategoryIds)), [entrustForm.program[0].category_id]))) === null || _j === void 0 ? void 0 : _j.toString() : '',
4867
+ category_id: (((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.program_selected_ids) === null || _h === void 0 ? void 0 : _h.length) > 0) ? (_k = this.getUniqueIds(__spreadArray(__spreadArray(__spreadArray([], __read((_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.category)), __read(linkedCategoryIds)), [entrustForm.program[0].category_id]))) === null || _k === void 0 ? void 0 : _k.toString() : '',
4786
4868
  cc_email: (moreOptions.OVERSEER) ? this.returnIds(this.overseerUserList, 'employee_id').toString() : '',
4787
4869
  checkpoint_description: (moreOptions.CHECKPOINTS) ? entrustForm.checkpointInstruction : '',
4788
4870
  checkpoint_details: (moreOptions.CHECKPOINTS) ? JSON.stringify(this.responsibilityForm.checkpoints) : '',
@@ -4791,7 +4873,7 @@
4791
4873
  comment: '',
4792
4874
  continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency) ? entrustForm.continuous_failed_days : 0,
4793
4875
  cost_of_compliance: '',
4794
- created_by: ((_k = entrustForm.assignors.list) === null || _k === void 0 ? void 0 : _k.length) < 1 ? 0 : this.memberId,
4876
+ created_by: ((_l = entrustForm.assignors.list) === null || _l === void 0 ? void 0 : _l.length) < 1 ? 0 : this.memberId,
4795
4877
  creation_window: 0,
4796
4878
  custom_tags: JSON.stringify(entrustForm.customTags),
4797
4879
  entity_tree: (moreOptions.RC) ? rcDetails : [],
@@ -4800,7 +4882,7 @@
4800
4882
  failed_time_utc: entrustForm.failed_time_utc,
4801
4883
  failure_cc_email: (moreOptions.OVERSEER) ? this.returnIds(this.overseerUserNotifyList, 'employee_id').toString() : '',
4802
4884
  frequency_details: entrustForm.frequency,
4803
- frequency_time: (_l = entrustForm.timeIn24Hr) !== null && _l !== void 0 ? _l : "23:59:00",
4885
+ frequency_time: (_m = entrustForm.timeIn24Hr) !== null && _m !== void 0 ? _m : "23:59:00",
4804
4886
  grc_object_id: 0,
4805
4887
  grc_relationship: '',
4806
4888
  if_testplan_failed: 0,
@@ -4808,10 +4890,10 @@
4808
4890
  isGroupAssignTo: (entrustForm.assignees.whoCanComplete == 'ANY_ONE') ? 1 : 0,
4809
4891
  is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
4810
4892
  library_report_id: 0,
4811
- lifecycle_details: (_m = entrustForm.lifecycleDetails) !== null && _m !== void 0 ? _m : '0000-00-00~~0',
4893
+ lifecycle_details: (_o = entrustForm.lifecycleDetails) !== null && _o !== void 0 ? _o : '0000-00-00~~0',
4812
4894
  link_for_details: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatLinks : [],
4813
4895
  linkages: { compliance: [] },
4814
- member_id: this.returnIds(entrustForm.assignors.list, 'member_id').length > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
4896
+ member_id: ((_p = this.returnIds(entrustForm.assignors.list, 'member_id')) === null || _p === void 0 ? void 0 : _p.length) > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
4815
4897
  objective: (moreOptions.OBJECTIVE) ? objective : '',
4816
4898
  on_completion_of: entrustForm.reportId ? [entrustForm.reportId] : [],
4817
4899
  on_completion_of_type: 1,
@@ -4835,18 +4917,18 @@
4835
4917
  },
4836
4918
  } : {},
4837
4919
  userGroupIds: {
4838
- assigneeAllGroupIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_o = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _o === void 0 ? void 0 : _o.list, 'group_id') : [],
4839
- assigneeAnyoneGroupIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_p = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _p === void 0 ? void 0 : _p.list, 'group_id') : [],
4840
- ccEmailGroupIds: (_s = this.returnIds((_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseersGroups) === null || _r === void 0 ? void 0 : _r.list, 'group_id')) !== null && _s !== void 0 ? _s : [],
4841
- failureCCEmailGroupIds: (_v = this.returnIds((_u = (_t = this.responsibilityForm) === null || _t === void 0 ? void 0 : _t.overseersGroups) === null || _u === void 0 ? void 0 : _u.notifyList, 'group_id')) !== null && _v !== void 0 ? _v : [],
4842
- reviewerGroupIds: (_y = this.returnIds((_x = (_w = this.responsibilityForm) === null || _w === void 0 ? void 0 : _w.groupReviewers) === null || _x === void 0 ? void 0 : _x.list, 'group_id')) !== null && _y !== void 0 ? _y : []
4920
+ assigneeAllGroupIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_q = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _q === void 0 ? void 0 : _q.list, 'group_id') : [],
4921
+ assigneeAnyoneGroupIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_r = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assigneeGroups) === null || _r === void 0 ? void 0 : _r.list, 'group_id') : [],
4922
+ ccEmailGroupIds: (_u = this.returnIds((_t = (_s = this.responsibilityForm) === null || _s === void 0 ? void 0 : _s.overseersGroups) === null || _t === void 0 ? void 0 : _t.list, 'group_id')) !== null && _u !== void 0 ? _u : [],
4923
+ failureCCEmailGroupIds: (_x = this.returnIds((_w = (_v = this.responsibilityForm) === null || _v === void 0 ? void 0 : _v.overseersGroups) === null || _w === void 0 ? void 0 : _w.notifyList, 'group_id')) !== null && _x !== void 0 ? _x : [],
4924
+ reviewerGroupIds: (_0 = this.returnIds((_z = (_y = this.responsibilityForm) === null || _y === void 0 ? void 0 : _y.groupReviewers) === null || _z === void 0 ? void 0 : _z.list, 'group_id')) !== null && _0 !== void 0 ? _0 : []
4843
4925
  },
4844
4926
  existingUserIds: {
4845
- assigneeAllIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_z = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _z === void 0 ? void 0 : _z.list, 'my_member_id') : [],
4846
- assigneeAnyoneIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_0 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _0 === void 0 ? void 0 : _0.list, 'my_member_id') : [],
4847
- ccEmailEmpIds: (_2 = this.returnIds((_1 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _1 === void 0 ? void 0 : _1.list, 'employee_id')) !== null && _2 !== void 0 ? _2 : [],
4848
- failureCCEmailEmpIds: (_4 = this.returnIds((_3 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _3 === void 0 ? void 0 : _3.notifyList, 'employee_id')) !== null && _4 !== void 0 ? _4 : [],
4849
- reviewerIds: (_7 = this.returnIds((_6 = (_5 = this.responsibilityForm) === null || _5 === void 0 ? void 0 : _5.reviewers) === null || _6 === void 0 ? void 0 : _6.list, 'member_id')) !== null && _7 !== void 0 ? _7 : []
4927
+ assigneeAllIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE' ? this.returnIds((_1 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _1 === void 0 ? void 0 : _1.list, 'my_member_id') : [],
4928
+ assigneeAnyoneIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE' ? this.returnIds((_2 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assignees) === null || _2 === void 0 ? void 0 : _2.list, 'my_member_id') : [],
4929
+ ccEmailEmpIds: (_4 = this.returnIds((_3 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _3 === void 0 ? void 0 : _3.list, 'employee_id')) !== null && _4 !== void 0 ? _4 : [],
4930
+ failureCCEmailEmpIds: (_6 = this.returnIds((_5 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.overseers) === null || _5 === void 0 ? void 0 : _5.notifyList, 'employee_id')) !== null && _6 !== void 0 ? _6 : [],
4931
+ reviewerIds: (_9 = this.returnIds((_8 = (_7 = this.responsibilityForm) === null || _7 === void 0 ? void 0 : _7.reviewers) === null || _8 === void 0 ? void 0 : _8.list, 'member_id')) !== null && _9 !== void 0 ? _9 : []
4850
4932
  },
4851
4933
  reviewer_checkpoints: [{ checkpoints: [], instruction: '' }],
4852
4934
  reviewer_id: 0,
@@ -4856,10 +4938,10 @@
4856
4938
  sample_size: 0,
4857
4939
  start_date_utc: startDate,
4858
4940
  statutory_day: 0,
4859
- test_required_flag: (moreOptions.ASSURANCE) ? (entrustForm.assuranceList.length > 0 ? 1 : 0) : 0,
4941
+ test_required_flag: (moreOptions.ASSURANCE) ? (((_10 = entrustForm.assuranceList) === null || _10 === void 0 ? void 0 : _10.length) > 0 ? 1 : 0) : 0,
4860
4942
  testplan_category_id: (moreOptions.ASSURANCE) ? this.returnIds(entrustForm.assuranceList, 'category_id') : [],
4861
4943
  testplan_category_manager: '',
4862
- audit_category_details: moreOptions.REQUIRES_AUDIT && ((_9 = (_8 = this.responsibilityForm) === null || _8 === void 0 ? void 0 : _8.audit_category_details) === null || _9 === void 0 ? void 0 : _9.category_id) ? {
4944
+ audit_category_details: moreOptions.REQUIRES_AUDIT && ((_12 = (_11 = this.responsibilityForm) === null || _11 === void 0 ? void 0 : _11.audit_category_details) === null || _12 === void 0 ? void 0 : _12.category_id) ? {
4863
4945
  category_id: this.responsibilityForm.audit_category_details.category_id,
4864
4946
  sample: this.selectedSample === 0 ? this.sampleValue : 0,
4865
4947
  percentage: this.selectedSample === 1 ? this.samplePercentage : 0,
@@ -4873,11 +4955,11 @@
4873
4955
  frequency_time: ''
4874
4956
  },
4875
4957
  assessment: {
4876
- category_id: moreOptions.ASSESSMENT ? (_10 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _10 === void 0 ? void 0 : _10.category_id : '',
4877
- assessment_id: moreOptions.ASSESSMENT ? (_11 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _11 === void 0 ? void 0 : _11.assessment_id : ''
4958
+ category_id: moreOptions.ASSESSMENT ? (_13 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _13 === void 0 ? void 0 : _13.category_id : '',
4959
+ assessment_id: moreOptions.ASSESSMENT ? (_14 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _14 === void 0 ? void 0 : _14.assessment_id : ''
4878
4960
  },
4879
- assessment_checkpoint: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints : {}) : {},
4880
- questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_12 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _12 === void 0 ? void 0 : _12.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
4961
+ assessment_checkpoint: moreOptions.CHECKPOINTS_NEW ? (((_15 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _15 === void 0 ? void 0 : _15.length) > 0 ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints : {}) : {},
4962
+ questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (((_16 = Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints)) === null || _16 === void 0 ? void 0 : _16.length) > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_17 = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _17 === void 0 ? void 0 : _17.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
4881
4963
  };
4882
4964
  this.responsibilityPayload = payload;
4883
4965
  if (this.mode == 'CREATE' && !this.isDuplicateEntrust) {
@@ -4932,18 +5014,18 @@
4932
5014
  return userList;
4933
5015
  };
4934
5016
  WorkflowComplianceComponent.prototype.combineUserAndUserGroupMembers = function () {
4935
- var _a, _b, _c, _d, _e, _f, _g, _h;
5017
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
4936
5018
  if (this.featureFlag_groups) {
4937
- this.assigneeUserList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm.assigneeGroups.list, this.responsibilityForm.assignees.list);
4938
- this.reviewerUserList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm.groupReviewers.list, this.responsibilityForm.reviewers.list);
4939
- this.overseerUserList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm.overseersGroups.list, this.responsibilityForm.overseers.list);
4940
- this.overseerUserNotifyList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm.overseersGroups.notifyList, this.responsibilityForm.overseers.notifyList);
5019
+ this.assigneeUserList = this.uniqueIdUserGroups(this.allUsersList, (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assigneeGroups) === null || _b === void 0 ? void 0 : _b.list, (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.assignees) === null || _d === void 0 ? void 0 : _d.list);
5020
+ this.reviewerUserList = this.uniqueIdUserGroups(this.allUsersList, (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.groupReviewers) === null || _f === void 0 ? void 0 : _f.list, (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.reviewers) === null || _h === void 0 ? void 0 : _h.list);
5021
+ this.overseerUserList = this.uniqueIdUserGroups(this.allUsersList, (_k = (_j = this.responsibilityForm) === null || _j === void 0 ? void 0 : _j.overseersGroups) === null || _k === void 0 ? void 0 : _k.list, (_m = (_l = this.responsibilityForm) === null || _l === void 0 ? void 0 : _l.overseers) === null || _m === void 0 ? void 0 : _m.list);
5022
+ this.overseerUserNotifyList = this.uniqueIdUserGroups(this.allUsersList, (_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseersGroups) === null || _p === void 0 ? void 0 : _p.notifyList, (_r = (_q = this.responsibilityForm) === null || _q === void 0 ? void 0 : _q.overseers) === null || _r === void 0 ? void 0 : _r.notifyList);
4941
5023
  }
4942
5024
  else {
4943
- this.assigneeUserList = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.assignees) === null || _b === void 0 ? void 0 : _b.list;
4944
- this.reviewerUserList = (_d = (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.reviewers) === null || _d === void 0 ? void 0 : _d.list;
4945
- this.overseerUserList = (_f = (_e = this.responsibilityForm) === null || _e === void 0 ? void 0 : _e.overseers) === null || _f === void 0 ? void 0 : _f.list;
4946
- this.overseerUserNotifyList = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.overseers) === null || _h === void 0 ? void 0 : _h.notifyList;
5025
+ this.assigneeUserList = (_t = (_s = this.responsibilityForm) === null || _s === void 0 ? void 0 : _s.assignees) === null || _t === void 0 ? void 0 : _t.list;
5026
+ this.reviewerUserList = (_v = (_u = this.responsibilityForm) === null || _u === void 0 ? void 0 : _u.reviewers) === null || _v === void 0 ? void 0 : _v.list;
5027
+ this.overseerUserList = (_x = (_w = this.responsibilityForm) === null || _w === void 0 ? void 0 : _w.overseers) === null || _x === void 0 ? void 0 : _x.list;
5028
+ this.overseerUserNotifyList = (_z = (_y = this.responsibilityForm) === null || _y === void 0 ? void 0 : _y.overseers) === null || _z === void 0 ? void 0 : _z.notifyList;
4947
5029
  }
4948
5030
  };
4949
5031
  /**
@@ -5507,7 +5589,7 @@
5507
5589
  * @param {any} [res] - is the response from the API
5508
5590
  */
5509
5591
  WorkflowComplianceComponent.prototype.getEditMoreOptions = function (res) {
5510
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
5592
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
5511
5593
  var checkedMoreOptions = [];
5512
5594
  if (this.responsibilityForm.objective !== '') {
5513
5595
  checkedMoreOptions.push('OBJECTIVE');
@@ -5515,7 +5597,7 @@
5515
5597
  }
5516
5598
  checkedMoreOptions.push('RISK_CLASSIFICATION');
5517
5599
  this.moreOptions.RISK_CLASSIFICATION = true;
5518
- if (this.responsibilityForm.program.length > 0) {
5600
+ if (((_a = this.responsibilityForm.program) === null || _a === void 0 ? void 0 : _a.length) > 0) {
5519
5601
  checkedMoreOptions.push('PROGRAM');
5520
5602
  this.moreOptions.PROGRAM = true;
5521
5603
  }
@@ -5523,27 +5605,27 @@
5523
5605
  checkedMoreOptions.push('FORMATE_EVIDENCE');
5524
5606
  this.moreOptions.FORMATE_EVIDENCE = true;
5525
5607
  }
5526
- if (this.responsibilityForm.rc.length > 0) {
5608
+ if (((_b = this.responsibilityForm.rc) === null || _b === void 0 ? void 0 : _b.length) > 0) {
5527
5609
  checkedMoreOptions.push('RC');
5528
5610
  this.moreOptions.RC = true;
5529
5611
  }
5530
- if (this.responsibilityForm.checkpoints.length > 0) {
5612
+ if (((_c = this.responsibilityForm.checkpoints) === null || _c === void 0 ? void 0 : _c.length) > 0) {
5531
5613
  checkedMoreOptions.push('CHECKPOINTS');
5532
5614
  this.moreOptions.CHECKPOINTS = true;
5533
5615
  }
5534
- if (((_c = (_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.reviewers) === null || _b === void 0 ? void 0 : _b.list) === null || _c === void 0 ? void 0 : _c.length) > 0 || ((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.groupReviewer) === null || _e === void 0 ? void 0 : _e.list) === null || _f === void 0 ? void 0 : _f.length) > 0) {
5616
+ if (((_f = (_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.reviewers) === null || _e === void 0 ? void 0 : _e.list) === null || _f === void 0 ? void 0 : _f.length) > 0 || ((_j = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.groupReviewer) === null || _h === void 0 ? void 0 : _h.list) === null || _j === void 0 ? void 0 : _j.length) > 0) {
5535
5617
  checkedMoreOptions.push('REVIEWER');
5536
5618
  this.moreOptions.REVIEWER = true;
5537
5619
  }
5538
- if (((_j = (_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.overseers) === null || _h === void 0 ? void 0 : _h.list) === null || _j === void 0 ? void 0 : _j.length) > 0 || ((_m = (_l = (_k = this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.overseers) === null || _l === void 0 ? void 0 : _l.notifyList) === null || _m === void 0 ? void 0 : _m.length) > 0 || ((_q = (_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseersGroups) === null || _p === void 0 ? void 0 : _p.list) === null || _q === void 0 ? void 0 : _q.length) > 0 || ((_t = (_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.overseersGroups) === null || _s === void 0 ? void 0 : _s.notifyList) === null || _t === void 0 ? void 0 : _t.length) > 0) {
5620
+ if (((_m = (_l = (_k = this.responsibilityForm) === null || _k === void 0 ? void 0 : _k.overseers) === null || _l === void 0 ? void 0 : _l.list) === null || _m === void 0 ? void 0 : _m.length) > 0 || ((_q = (_p = (_o = this.responsibilityForm) === null || _o === void 0 ? void 0 : _o.overseers) === null || _p === void 0 ? void 0 : _p.notifyList) === null || _q === void 0 ? void 0 : _q.length) > 0 || ((_t = (_s = (_r = this.responsibilityForm) === null || _r === void 0 ? void 0 : _r.overseersGroups) === null || _s === void 0 ? void 0 : _s.list) === null || _t === void 0 ? void 0 : _t.length) > 0 || ((_w = (_v = (_u = this.responsibilityForm) === null || _u === void 0 ? void 0 : _u.overseersGroups) === null || _v === void 0 ? void 0 : _v.notifyList) === null || _w === void 0 ? void 0 : _w.length) > 0) {
5539
5621
  checkedMoreOptions.push('OVERSEER');
5540
5622
  this.moreOptions.OVERSEER = true;
5541
5623
  }
5542
- if (this.responsibilityForm.assuranceList.length > 0) {
5624
+ if (((_y = (_x = this.responsibilityForm) === null || _x === void 0 ? void 0 : _x.assuranceList) === null || _y === void 0 ? void 0 : _y.length) > 0) {
5543
5625
  checkedMoreOptions.push('ASSURANCE');
5544
5626
  this.moreOptions.ASSURANCE = true;
5545
5627
  }
5546
- if (this.responsibilityForm.requiresAuditList.length > 0) {
5628
+ if (((_z = this.responsibilityForm.requiresAuditList) === null || _z === void 0 ? void 0 : _z.length) > 0) {
5547
5629
  checkedMoreOptions.push('REQUIRES_AUDIT');
5548
5630
  this.moreOptions.REQUIRES_AUDIT = true;
5549
5631
  }
@@ -5623,7 +5705,7 @@
5623
5705
  WorkflowComplianceComponent.prototype.getAssessmentDetails = function (assessmentDetails, type) {
5624
5706
  var _this = this;
5625
5707
  this.responsibilityService.getAssessmentDetailsByID(assessmentDetails.assessment_id).subscribe(function (res) {
5626
- if (res.length > 0) {
5708
+ if ((res === null || res === void 0 ? void 0 : res.length) > 0) {
5627
5709
  if (type === 'assessment') {
5628
5710
  var categoryDetails = res[0].category.find(function (ele) { return ele._id == assessmentDetails.category_id; });
5629
5711
  _this.moreOptions.ASSESSMENT = true;
@@ -5658,8 +5740,9 @@
5658
5740
  * @param event Assessment details
5659
5741
  */
5660
5742
  WorkflowComplianceComponent.prototype.postAssessment = function (event) {
5743
+ var _a;
5661
5744
  this.responsibilityForm.new_checkpoints = event.assessmentDetails;
5662
- this.checkpointCount = event.assessmentDetails.elements.length;
5745
+ this.checkpointCount = (_a = event.assessmentDetails.elements) === null || _a === void 0 ? void 0 : _a.length;
5663
5746
  this.checkpointCountUpdated.emit(this.checkpointCount);
5664
5747
  this.setIsUploaded(false);
5665
5748
  };
@@ -5717,7 +5800,7 @@
5717
5800
  WorkflowComplianceComponent.decorators = [
5718
5801
  { type: i0.Component, args: [{
5719
5802
  selector: 'app-workflow-compliance',
5720
- template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n I am creating this responsibility on behalf of someone else\r\n <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n </app-cs-switch>\r\n </label>\r\n <div class=\"select\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n placeholder=\"Who is responsible for managing this responsibility?\" readonly\r\n [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n </div>\r\n <div class=\"selected\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n {{b_user.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #behalf [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n {{ b_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n person responsible for managing this responsibility.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- What -->\r\n\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n What? <span class=\"required\">*</span>\r\n <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n </label>\r\n <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n <i class=\"icons\">&#xea70;</i>\r\n </span>\r\n <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n this responsibility.</p>\r\n <div class=\"switch-row align-right\">\r\n <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n Responsibility\r\n </app-cs-switch>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n <div class=\"select\" *ngIf=\"(responsibilityForm?.assignees?.list?.length == 0 && (!featureFlag_groups||(responsibilityForm?.assigneeGroups?.list?.length == 0 && featureFlag_groups)))\">\r\n <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.assignees?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.assignees?.list?.length > 0 || responsibilityForm?.assigneeGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n {{e_user.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> {{responsibilityForm?.assignees?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{responsibilityForm?.assigneeGroups?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assignees' && (!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n <app-popover #user [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees',e_user)\" >&#xe90d;</i>\r\n {{ e_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.assigneeGroups?.list\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i *ngIf=\"(!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"icons\" (click)=\"remove('groupassignees',group)\" >&#xe90d;</i>\r\n {{group.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 <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n responsible for completing this responsibility.</p>\r\n <ng-container *ngIf=\"!isGroupAssigned\">\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n PERSONS NEED TO\r\n COMPLETE THIS<i class=\"icons\"\r\n [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n\r\n <div class=\"switch-row align-right\" *ngIf=\"(mode == 'EDIT' && (!featureFlag_groups || (responsibilityForm?.assigneeGroups?.list.length === 0 && featureFlag_groups)))\">\r\n <app-cs-switch\r\n (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS\r\n </app-cs-switch>\r\n </div>\r\n </ng-container>\r\n <app-popover #assignees [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n {{ e_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- When? -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.frequency && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n class=\"select button-sec\">\r\n <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n readonly>\r\n <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n </div>\r\n <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n class=\"selected button-sec\">\r\n <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons\">&#xe9ba;</i>Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n frequency of occurrence for this responsibility.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Notes -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Notes</label>\r\n <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n colorPalette: true,\r\n link: true,\r\n id:'notes',\r\n placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Objective -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() !== '') && !focus.objective\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Objective</label>\r\n <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n colorPalette: true,\r\n id:'objective',\r\n link: true,\r\n placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Center -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center </label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n </div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n {{rc?.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+\r\n {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #rc [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Program</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n </div>\r\n <app-popover #program [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li class=\"multiple-program\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n {{responsibilityForm?.program[0]?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{ program?.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Category -->\r\n <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Category </label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n {{category.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n (click)=\"category.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.category?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #category [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n {{ category.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Format & Evidence -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n </app-format-and-evidence>\r\n </div>\r\n\r\n </div>\r\n <!-- Assessment -->\r\n <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n placeholder=\"Select an assessment for this responsibility\"\r\n [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n <span class=\"chip with-question\">\r\n <span class=\"value\"\r\n [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n class=\"icons\"\r\n (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n 'Question'}}</span>\r\n </span>\r\n </div>\r\n <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n type=\"button\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- Checkpoints -->\r\n <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n <!-- {{responsibilityForm.checkpoints|json}}\r\n {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n Checkpoints\r\n <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n (click)=\"activateSelector('checkpoints',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\"\r\n [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n {{checkpoint?.label}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints',true)\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n <i class=\"icons alert-icon\">&#xe930;</i>\r\n <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n instead of the old checkpoints functionality to create analytical questions. <button\r\n class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n continue.</span>\r\n </div>\r\n <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n {{ checkpoint?.label }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <!-- New Checkpoints -->\r\n <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n <!-- {{responsibilityForm.checkpoints|json}}\r\n {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n Checkpoints\r\n <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n <!-- <button class=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n <span class=\"chip\">\r\n <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n {{ checkpoint?.label }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <!-- Risk Classification -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n <svg 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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Risk Classification\r\n <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n </label>\r\n\r\n <div class=\"classification\">\r\n <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n [value]=\"risk?.value\">\r\n <span>{{risk?.name}}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Reviewer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n [class.active]=\"activeSelector === 'reviewerFrequency'|| activeSelector === 'reviewer'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Reviewer</label>\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length == 0 && responsibilityForm?.groupReviewers?.list?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length > 0 || responsibilityForm?.groupReviewers?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n {{reviewer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> {{responsibilityForm?.reviewers?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{responsibilityForm?.groupReviewers?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-cs-radio\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"responsibilityForm?.groupReviewers?.list?.length > 0\">\r\n SEQUENTIAL<i class=\"icons\"\r\n [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-cs-radio\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n {{ reviewer.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #user [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\" >&#xe90d;</i>\r\n {{ reviewer.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.groupReviewers?.list; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('groupReviewer',group)\" >&#xe90d;</i>\r\n {{group.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 </div>\r\n </div>\r\n\r\n <!-- Overseer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n [class.active]=\" activeSelector === 'overseerNotify' || activeSelector === 'overseer'\"\r\n [class.disabled]=\"activeSelector && !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' || activeSelector === 'overseer'\">\r\n <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n && !( activeSelector === 'overseerNotify' || activeSelector === 'overseer')\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Overseer </label>\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length == 0 && responsibilityForm?.overseersGroups?.list?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length > 0 || responsibilityForm?.overseersGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n {{overseer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> {{responsibilityForm?.overseers?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{responsibilityForm?.overseersGroups?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length == 0 && responsibilityForm?.overseersGroups?.notifyList?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length > 0 || responsibilityForm?.overseersGroups?.notifyList?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n <span class=\"chip\"\r\n *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n {{overseer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> {{responsibilityForm?.overseers?.notifyList?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">{{responsibilityForm?.overseersGroups?.notifyList?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #overseers [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerUser [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseers of responsibilityForm?.overseers?.list ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',overseers)\" >&#xe90d;</i>\r\n {{ overseers?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseersGroups?.list; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerGroup',overseer)\" >&#xe90d;</i>\r\n {{overseer?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notify [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notifyUser [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\" >&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notifyGroup [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.overseersGroups?.notifyList; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList',group)\" >&#xe90d;</i>\r\n {{group?.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 </div>\r\n </div>\r\n <!-- Assurance -->\r\n\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"\r\n [attr.id]=\"'ASSURANCE'\" [class.active]=\"activeSelector === 'assurance'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Assurance</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\"\r\n aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n </div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n placeholder=\"Select the test plan categories that you would like to add...\"\r\n readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{assurance.category_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assurance',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #assurance [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{ assurance.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n [class.active]=\"activeSelector === 'requires_audit'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n placeholder=\"Select the test plan categories that you would like to add...\"\r\n readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\r\n (click)=\"activateSelector('requires_audit',true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{assurance.category_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n </div> -->\r\n <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n class=\"icons\">&#xe90c;</i>\r\n Edit</button> -->\r\n\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i>\r\n {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n class=\"icons\">&#xe90c;</i> Edit</button>\r\n <!-- class=\"icons\">&#xe9ba;</i>\r\n Edit</button> -->\r\n </div>\r\n <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n <label class=\"vx-control-panel vx-mt-8\">\r\n SAMPLE SIZE\r\n <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n </label>\r\n <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n [checked]=\"selectedSample === 0\">\r\n <div class=\"name\">COUNT</div>\r\n <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n [(ngModel)]=\"sampleValue\">\r\n </app-cs-radio>\r\n <div class=\"or\">OR</div>\r\n <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n [checked]=\"selectedSample === 1\">\r\n <div class=\"name\">PERCENTAGE</div>\r\n <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n placeholder=\"--\">\r\n </app-cs-radio>\r\n </div>\r\n <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n <div class=\"reminder-part\">\r\n Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n <div class=\"picker-group\">\r\n <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n [min]=\"currentTime\" readonly>\r\n <i class=\"icons\">&#xe955;</i>\r\n <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n </ngx-material-timepicker>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{ assurance.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover> -->\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n <app-group-users-list *ngIf=\"isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\" [assigneeGroupsList] =\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\" [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\" >\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\" [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\" [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n [selectedUsers] =\"responsibilityForm?.reviewers?.list\" (cancel)=\"activeDeselector()\" (save) = \"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\" [mode]=\"mode\"\r\n (reviewerWorkflowTypeChange) = \"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n [usersList]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\"\r\n (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list >\r\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n[userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\"\r\n (save)=\"saveSelectedList('overseer',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n</user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'&& !featureFlag_groups\" [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n <user-group-list *ngIf=\"activeSelector ==='overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\"\r\n (save)=\"saveSelectedList('overseerNotify',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];responsibilityForm.groupReviewers.list = []\"\r\n (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n </app-create-assessment-container>\r\n</div>\r\n",
5803
+ template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n I am creating this responsibility on behalf of someone else\r\n <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n </app-cs-switch>\r\n </label>\r\n <div class=\"select\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n placeholder=\"Who is responsible for managing this responsibility?\" readonly\r\n [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n </div>\r\n <div class=\"selected\"\r\n *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n {{b_user.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #behalf [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n {{ b_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n person responsible for managing this responsibility.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- What -->\r\n\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n What? <span class=\"required\">*</span>\r\n <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n </label>\r\n <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n <i class=\"icons\">&#xea70;</i>\r\n </span>\r\n <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n this responsibility.</p>\r\n <div class=\"switch-row align-right\">\r\n <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n Responsibility\r\n </app-cs-switch>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n <div class=\"select\" *ngIf=\"(responsibilityForm?.assignees?.list?.length == 0 && (!featureFlag_groups||(responsibilityForm?.assigneeGroups?.list?.length == 0 && featureFlag_groups)))\">\r\n <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.assignees?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.assignees?.list?.length > 0 || responsibilityForm?.assigneeGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n {{e_user.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> {{responsibilityForm?.assignees?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{responsibilityForm?.assigneeGroups?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assignees' && (!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n <app-popover #user [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees',e_user)\" >&#xe90d;</i>\r\n {{ e_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.assigneeGroups?.list\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i *ngIf=\"(!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"icons\" (click)=\"remove('groupassignees',group)\" >&#xe90d;</i>\r\n {{group.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 <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n responsible for completing this responsibility.</p>\r\n <ng-container *ngIf=\"!isGroupAssigned\">\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n PERSONS NEED TO\r\n COMPLETE THIS<i class=\"icons\"\r\n [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n\r\n <div class=\"switch-row align-right\" *ngIf=\"(mode == 'EDIT' && (!featureFlag_groups || (responsibilityForm?.assigneeGroups?.list.length === 0 && featureFlag_groups)))\">\r\n <app-cs-switch\r\n (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS\r\n </app-cs-switch>\r\n </div>\r\n </ng-container>\r\n <app-popover #assignees [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n {{ e_user.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- When? -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.frequency && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n class=\"select button-sec\">\r\n <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n readonly>\r\n <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n </div>\r\n <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n class=\"selected button-sec\">\r\n <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n (click)=\"activateSelector('frequency',true)\">\r\n <i class=\"icons\">&#xe9ba;</i>Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n frequency of occurrence for this responsibility.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Notes -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\"\r\n [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n <svg class=\"checkIcon\"\r\n *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Notes</label>\r\n <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n colorPalette: true,\r\n link: true,\r\n id:'notes',\r\n placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Objective -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() !== '') && !focus.objective\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Objective</label>\r\n <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n colorPalette: true,\r\n id:'objective',\r\n link: true,\r\n placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Center -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center </label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n </div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n {{rc?.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+\r\n {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\"\r\n type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #rc [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n {{ rc.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Program</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n </div>\r\n <app-popover #program [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li class=\"multiple-program\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n {{responsibilityForm?.program[0]?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{ program?.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Category -->\r\n <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Category </label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n </div>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n {{category.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n (click)=\"category.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.category?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #category [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n {{ category.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Format & Evidence -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n </app-format-and-evidence>\r\n </div>\r\n\r\n </div>\r\n <!-- Assessment -->\r\n <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n placeholder=\"Select an assessment for this responsibility\"\r\n [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n <span class=\"chip with-question\">\r\n <span class=\"value\"\r\n [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n class=\"icons\"\r\n (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n 'Question'}}</span>\r\n </span>\r\n </div>\r\n <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n type=\"button\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <!-- Checkpoints -->\r\n <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n <!-- {{responsibilityForm.checkpoints|json}}\r\n {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n Checkpoints\r\n <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n (click)=\"activateSelector('checkpoints',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\"\r\n [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n {{checkpoint?.label}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints',true)\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n <i class=\"icons alert-icon\">&#xe930;</i>\r\n <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n instead of the old checkpoints functionality to create analytical questions. <button\r\n class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n continue.</span>\r\n </div>\r\n <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n {{ checkpoint?.label }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <!-- New Checkpoints -->\r\n <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n <!-- {{responsibilityForm.checkpoints|json}}\r\n {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n Checkpoints\r\n <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n <!-- <button class=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n <span class=\"chip\">\r\n <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">\r\n <i class=\"icons\">&#xe9ba;</i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n {{ checkpoint?.label }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <!-- Risk Classification -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n <svg 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=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Risk Classification\r\n <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n </label>\r\n\r\n <div class=\"classification\">\r\n <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n [value]=\"risk?.value\">\r\n <span>{{risk?.name}}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Reviewer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n [class.active]=\"activeSelector === 'reviewerFrequency'|| activeSelector === 'reviewer'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Reviewer</label>\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length == 0 && responsibilityForm?.groupReviewers?.list?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length > 0 || responsibilityForm?.groupReviewers?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n {{reviewer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> {{responsibilityForm?.reviewers?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{responsibilityForm?.groupReviewers?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-cs-radio\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"responsibilityForm?.groupReviewers?.list?.length > 0\">\r\n SEQUENTIAL<i class=\"icons\"\r\n [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-cs-radio\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </app-cs-radio>\r\n <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n {{ reviewer.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #user [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\" >&#xe90d;</i>\r\n {{ reviewer.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.groupReviewers?.list; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('groupReviewer',group)\" >&#xe90d;</i>\r\n {{group.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 </div>\r\n </div>\r\n\r\n <!-- Overseer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n [class.active]=\" activeSelector === 'overseerNotify' || activeSelector === 'overseer'\"\r\n [class.disabled]=\"activeSelector && !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' || activeSelector === 'overseer'\">\r\n <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n && !( activeSelector === 'overseerNotify' || activeSelector === 'overseer')\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Overseer </label>\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length == 0 && responsibilityForm?.overseersGroups?.list?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length > 0 || responsibilityForm?.overseersGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n {{overseer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> {{responsibilityForm?.overseers?.list?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{responsibilityForm?.overseersGroups?.list?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n\r\n <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length == 0 && responsibilityForm?.overseersGroups?.notifyList?.length == 0) && featureFlag_groups))\">\r\n <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length > 0 || responsibilityForm?.overseersGroups?.notifyList?.length > 0 ) && featureFlag_groups))\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n <span class=\"chip\"\r\n *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n {{overseer.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n <button class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> {{responsibilityForm?.overseers?.notifyList?.length}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\" >USER GROUP(S)</span></span>\r\n <button class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">{{responsibilityForm?.overseersGroups?.notifyList?.length}}</button>\r\n </div>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #overseers [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerUser [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseers of responsibilityForm?.overseers?.list ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',overseers)\" >&#xe90d;</i>\r\n {{ overseers?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseersGroups?.list; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerGroup',overseer)\" >&#xe90d;</i>\r\n {{overseer?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notify [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notifyUser [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList ; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\" >&#xe90d;</i>\r\n {{ overseer?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #notifyGroup [dontCloseonClick]=\"true\" >\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let group of responsibilityForm?.overseersGroups?.notifyList; let i = index\" >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList',group)\" >&#xe90d;</i>\r\n {{group?.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 </div>\r\n </div>\r\n <!-- Assurance -->\r\n\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"\r\n [attr.id]=\"'ASSURANCE'\" [class.active]=\"activeSelector === 'assurance'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Assurance</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\"\r\n aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n </div>\r\n <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n placeholder=\"Select the test plan categories that you would like to add...\"\r\n readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{assurance.category_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assurance',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #assurance [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{ assurance.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n [class.active]=\"activeSelector === 'requires_audit'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n placeholder=\"Select the test plan categories that you would like to add...\"\r\n readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\r\n (click)=\"activateSelector('requires_audit',true)\">\r\n </div>\r\n <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{assurance.category_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n </div> -->\r\n <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n class=\"icons\">&#xe90c;</i>\r\n Edit</button> -->\r\n\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i>\r\n {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n class=\"icons\">&#xe90c;</i> Edit</button>\r\n <!-- class=\"icons\">&#xe9ba;</i>\r\n Edit</button> -->\r\n </div>\r\n <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n <label class=\"vx-control-panel vx-mt-8\">\r\n SAMPLE SIZE\r\n <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n </label>\r\n <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n [checked]=\"selectedSample === 0\">\r\n <div class=\"name\">COUNT</div>\r\n <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n [(ngModel)]=\"sampleValue\">\r\n </app-cs-radio>\r\n <div class=\"or\">OR</div>\r\n <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n [checked]=\"selectedSample === 1\">\r\n <div class=\"name\">PERCENTAGE</div>\r\n <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n placeholder=\"--\">\r\n </app-cs-radio>\r\n </div>\r\n <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n <div class=\"reminder-part\">\r\n Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n <div class=\"picker-group\">\r\n <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n [min]=\"currentTime\" readonly>\r\n <i class=\"icons\">&#xe955;</i>\r\n <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n </ngx-material-timepicker>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n {{ assurance.category_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover> -->\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n <app-group-users-list *ngIf=\"isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"allUsersList\" [disabledId]=\"disableAssigneeIds\" [fromResponsibility] = \"'Assignee'\" [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n [groupsList]=\"groupsList\" [assigneeGroupsList] =\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\" [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\" >\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"allUsersList\"\r\n [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [disabledId]=\"disableRadioAssignee\" [fromResponsibility] = \"'Assignee'\" [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\r\n [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n [itemNameKey]=\"'member_name'\" [disabledIds]=\"disableReviewerIds\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [overseerIds]=\"overseerIds\"\r\n [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\" [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\" [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n [selectedUsers] =\"responsibilityForm?.reviewers?.list\" (cancel)=\"activeDeselector()\" (save) = \"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\" [mode]=\"mode\" [disabledIds]=\"disableReviewerIds\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [overseerIds]=\"overseerIds\"\r\n (reviewerWorkflowTypeChange) = \"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\" [disabledIds]=\"disableOverseerIds\"\r\n (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\" >\r\n</app-owner-list >\r\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n[userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n (save)=\"saveSelectedList('overseer',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n</user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'&& !featureFlag_groups\" [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n <user-group-list *ngIf=\"activeSelector ==='overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n (save)=\"saveSelectedList('overseerNotify',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];responsibilityForm.groupReviewers.list = []\"\r\n (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n </app-create-assessment-container>\r\n</div>\r\n",
5721
5804
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance marx-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .workflw-compliance marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:focus,::ng-deep .workflw-compliance .reminder-part .picker-group input:hover{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;top:0;right:30px;bottom:0;left:0;z-index:-1;width:calc(100vw - 30px)}.action-list ul.action-item li.multiple-program{background:#f8f8f8}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~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 .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .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 .vx-form-group .selected .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 .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~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 .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed 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%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;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!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
5722
5805
  },] }
5723
5806
  ];
@@ -7773,10 +7856,15 @@
7773
7856
  this.noDataText = '';
7774
7857
  this.workflowList = ['SEQUENTIAL', 'ANY REVIEWER CAN MARK THIS AS REVIEWED'];
7775
7858
  this.workflowText = 'Reviewer Workflow';
7859
+ this.disabledIds = [];
7776
7860
  this.nonRemovableUsersList = [];
7777
7861
  this.saveSelectedList = new i0.EventEmitter();
7778
7862
  this.closeUsersList = new i0.EventEmitter();
7779
7863
  this.reviewerWorkflowTypeChange = new i0.EventEmitter();
7864
+ this.assignorId = [];
7865
+ this.assigneeIds = [];
7866
+ this.reviewerIds = [];
7867
+ this.overseerIds = [];
7780
7868
  this.search = '';
7781
7869
  this.selectedIds = [];
7782
7870
  this.animation = false;
@@ -7794,6 +7882,8 @@
7794
7882
  };
7795
7883
  OwnerListComponent.prototype.ngOnInit = function () {
7796
7884
  var _this = this;
7885
+ var disabledIds = __spreadArray(__spreadArray([], __read(this.disabledIds)), __read(this.nonRemovableUsersList));
7886
+ this.disabledIds = __spreadArray([], __read(new Set(disabledIds)));
7797
7887
  this.animation = true;
7798
7888
  setTimeout(function () {
7799
7889
  _this.animation = false;
@@ -7867,7 +7957,7 @@
7867
7957
  OwnerListComponent.decorators = [
7868
7958
  { type: i0.Component, args: [{
7869
7959
  selector: 'app-owner-list',
7870
- template: "<div class=\"add-risk-owner-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-owner-list-head\">\r\n <h3 class=\"add-risk-owner-list-title\">{{listHeading}}</h3>\r\n </div>\r\n <div class=\"add-risk-owner-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" [attr.placeholder]=\"searchPlaceholder\" />\r\n </div>\r\n <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n <div class=\"body-top\" *ngIf=\"searchList?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"owner-list\" [class.full-height]=\"false\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let user of searchList\">\r\n <app-cs-checkbox [disabled]=\"nonRemovableUsersList.includes(user[userIdKey])\" [ngValue]=\"selectedIds.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\">\r\n <span class=\"name\" [appTooltip]=\"user[itemEmailKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=true>{{user[itemNameKey]}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length === 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(noDataText?.length > 0? noDataText :'No Users Found')\"></app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-floating-bar\r\n [selectedData]=\"selectedUsers|shortMerge : nonRemovableUsersList\"\r\n [displayElementKey]=\"itemNameKey\"\r\n [elementId]=\"userIdKey\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n [singularText]=\"singularText\"\r\n [pluralText]=\"pluralText\"\r\n (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\"\r\n (deleteEvent)=\"deleteEvent($event)\"\r\n (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n [showWorkflow]=\"showWorkflow\"\r\n [workflowText]=\"workflowText\"\r\n [selectedWorkflow]=\"reviewerWorkflowType\"\r\n [workflowList]=\"workflowList\"\r\n [mode]=\"mode\"\r\n [workflowPlaceHolder]=\"''\"\r\n [isDisabled]=\"selectedUsers?.length === 0 || usersList?.length === 0\">\r\n </app-floating-bar>\r\n</div>\r\n",
7960
+ template: "<div class=\"add-risk-owner-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-owner-list-head\">\r\n <h3 class=\"add-risk-owner-list-title\">{{listHeading}}</h3>\r\n </div>\r\n <div class=\"add-risk-owner-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" [attr.placeholder]=\"searchPlaceholder\" />\r\n </div>\r\n <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n <div class=\"body-top\" *ngIf=\"searchList?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"owner-list\" [class.full-height]=\"false\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let user of searchList\" [appTooltip]=\"user | tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'my_member_id':disabledIds?.includes(user[userIdKey])\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=true>\r\n <app-cs-checkbox [disabled]=\"disabledIds?.includes(user[userIdKey])\" [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\">\r\n <span class=\"name\" >{{user[itemNameKey]}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length === 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(noDataText?.length > 0? noDataText :'No Users Found')\"></app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-floating-bar\r\n [selectedData]=\"selectedUsers|shortMerge : nonRemovableUsersList\"\r\n [displayElementKey]=\"itemNameKey\"\r\n [elementId]=\"userIdKey\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n [singularText]=\"singularText\"\r\n [pluralText]=\"pluralText\"\r\n (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\"\r\n (deleteEvent)=\"deleteEvent($event)\"\r\n (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n [showWorkflow]=\"showWorkflow\"\r\n [workflowText]=\"workflowText\"\r\n [selectedWorkflow]=\"reviewerWorkflowType\"\r\n [workflowList]=\"workflowList\"\r\n [mode]=\"mode\"\r\n [workflowPlaceHolder]=\"''\"\r\n [isDisabled]=\"selectedUsers?.length === 0 || usersList?.length === 0\">\r\n </app-floating-bar>\r\n</div>\r\n",
7871
7961
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-owner-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:-1}::ng-deep .add-risk-owner-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-owner-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-owner-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-owner-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-owner-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-owner-list-body .search-block{position:relative}::ng-deep .add-risk-owner-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-owner-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-owner-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-owner-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-owner-list-body ul{padding:0;margin:0}::ng-deep .add-risk-owner-list-body ul.owner-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin;padding:16px 0 0}::ng-deep .add-risk-owner-list-body ul.owner-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-owner-list-body ul.owner-list li{width:50%;padding:0 20px 16px 0;list-style:none}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio{display:flex}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label{width:100%}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-owner-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-owner-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
7872
7962
  },] }
7873
7963
  ];
@@ -7888,10 +7978,16 @@
7888
7978
  noDataText: [{ type: i0.Input }],
7889
7979
  workflowList: [{ type: i0.Input }],
7890
7980
  workflowText: [{ type: i0.Input }],
7981
+ disabledIds: [{ type: i0.Input }],
7891
7982
  nonRemovableUsersList: [{ type: i0.Input }],
7892
7983
  saveSelectedList: [{ type: i0.Output }],
7893
7984
  closeUsersList: [{ type: i0.Output }],
7894
- reviewerWorkflowTypeChange: [{ type: i0.Output }]
7985
+ reviewerWorkflowTypeChange: [{ type: i0.Output }],
7986
+ fromResponsibility: [{ type: i0.Input }],
7987
+ assignorId: [{ type: i0.Input }],
7988
+ assigneeIds: [{ type: i0.Input }],
7989
+ reviewerIds: [{ type: i0.Input }],
7990
+ overseerIds: [{ type: i0.Input }]
7895
7991
  };
7896
7992
 
7897
7993
  // import isEqual from 'lodash-es/isEqual';
@@ -15738,6 +15834,10 @@
15738
15834
  this.closeUsersList = new i0.EventEmitter();
15739
15835
  this.selectedGroups = [];
15740
15836
  this.assigneeGroupsList = [];
15837
+ this.disabledId = [];
15838
+ this.reviewerIds = [];
15839
+ this.overseerIds = [];
15840
+ this.assignorId = [];
15741
15841
  this.search = '';
15742
15842
  this.selectedIds = [];
15743
15843
  this.animation = false;
@@ -15917,7 +16017,7 @@
15917
16017
  GroupUsersListComponent.decorators = [
15918
16018
  { type: i0.Component, args: [{
15919
16019
  selector: 'app-group-users-list',
15920
- template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-group-user-list-head\">\r\n <h3 class=\"add-risk-group-user-list-title\">Select User(s)</h3>\r\n <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n <i class=\"icons\">&#xe90d;</i>\r\n </button> -->\r\n </div>\r\n <div class=\"add-risk-group-user-list-body\">\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n </div>\r\n <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{ usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">USER GROUPS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{assigneeGroupsList?.length}}</span></button>\r\n </div>\r\n <ng-container *ngIf=\"!groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\">\r\n \r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container *ngFor=\"let group of grouplist\">\r\n <li *ngIf=\"!hideGroup(group.userIds)\">\r\n <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds.length !== 0\"\r\n (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers.length + group.userIds.length) > 19 && !checkGroupList(group.userIds) || group.userIds.length === 0\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers.length + group.userIds.length) > 19 && !checkGroupList(group.userIds)))\">\r\n <span class=\"name\">{{group.groupName}}<span\r\n class=\"counter\">{{(group.userIds.length>1)?\r\n group.userIds.length+' USERS':group.userIds.length+' USER' }}</span></span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && selectedUsers.length === 19 && !(selectedIds.includes(user[userIdKey]))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers.length === 19 && !(selectedIds.includes(user[userIdKey]))))\">\r\n <span class=\"name\" [appTooltip]=\"user.employee_email\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0 && grouplist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <!-- when pagination was show then with-pagination this class was true -->\r\n <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && selectedUsers.length === 19 && !(selectedIds.includes(user[userIdKey]))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers.length === 19 && !(selectedIds.includes(user[userIdKey]))))\">\r\n <span class=\"name\" [appTooltip]=\"user.employee_email\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\" >\r\n <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <strong>\r\n {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container>\r\n <li *ngFor=\"let group of grouplist; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedGroupIds.includes(group[groupIdKey])\"\r\n (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids.length) > 19 && !checkGroupList(group))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids.length) > 19 && !checkGroupList(group)))\">\r\n <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n </span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <app-no-data *ngIf=\"grouplist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n </div> \r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n </app-floating-bar>\r\n</div>",
16020
+ template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-group-user-list-head\">\r\n <h3 class=\"add-risk-group-user-list-title\">Select User(s)</h3>\r\n <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n <i class=\"icons\">&#xe90d;</i>\r\n </button> -->\r\n </div>\r\n <div class=\"add-risk-group-user-list-body\">\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n </div>\r\n <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{ usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">USER GROUPS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{assigneeGroupsList?.length}}</span></button>\r\n </div>\r\n <ng-container *ngIf=\"!groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\">\r\n \r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container *ngFor=\"let group of grouplist\">\r\n <li *ngIf=\"!hideGroup(group.userIds)\">\r\n <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n <span class=\"name\">{{group.groupName}}<span\r\n class=\"counter\">{{(group.userIds?.length>1)?\r\n group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0 && grouplist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <!-- when pagination was show then with-pagination this class was true -->\r\n <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled\" >\r\n <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <strong>\r\n {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container>\r\n <li *ngFor=\"let group of grouplist; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n </span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <app-no-data *ngIf=\"grouplist?.length === 0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n </div> \r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n </app-floating-bar>\r\n</div>",
15921
16021
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .add-risk-group-user-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-group-user-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-group-user-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-group-user-list-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 244px);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.with-pagination{height:calc(100vh - 280px)}::ng-deep .add-risk-group-user-list-body .list-block.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:calc(100vh - 240px)}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:16px 0 0;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
15922
16022
  },] }
15923
16023
  ];
@@ -15935,7 +16035,12 @@
15935
16035
  saveSelectedList: [{ type: i0.Output }],
15936
16036
  closeUsersList: [{ type: i0.Output }],
15937
16037
  selectedGroups: [{ type: i0.Input }],
15938
- assigneeGroupsList: [{ type: i0.Input }]
16038
+ assigneeGroupsList: [{ type: i0.Input }],
16039
+ disabledId: [{ type: i0.Input }],
16040
+ fromResponsibility: [{ type: i0.Input }],
16041
+ reviewerIds: [{ type: i0.Input }],
16042
+ overseerIds: [{ type: i0.Input }],
16043
+ assignorId: [{ type: i0.Input }]
15939
16044
  };
15940
16045
 
15941
16046
  // import isEqual from 'lodash-es/isEqual';
@@ -16613,6 +16718,10 @@
16613
16718
  this.itemEmailKey = '';
16614
16719
  this.saveSelectedList = new i0.EventEmitter();
16615
16720
  this.closeUsersList = new i0.EventEmitter();
16721
+ this.disabledId = [];
16722
+ this.reviewerIds = [];
16723
+ this.overseerIds = [];
16724
+ this.assignorId = [];
16616
16725
  this.search = '';
16617
16726
  this.selectedIds = [];
16618
16727
  this.animation = false;
@@ -16645,8 +16754,8 @@
16645
16754
  UserRadioListComponent.decorators = [
16646
16755
  { type: i0.Component, args: [{
16647
16756
  selector: 'app-users-radio-list',
16648
- template: "<div class=\"add-risk-user-radio-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-user-radio-list-head\">\r\n <h3 class=\"add-risk-user-radio-list-title\">Select User</h3>\r\n <!-- <button class=\"add-risk-user-radio-list-close\" (click)=\"close()\">\r\n <i class=\"icons\">&#xe90d;</i>\r\n </button> -->\r\n </div>\r\n <div *ngIf=\"usersList.length > 0\" class=\"add-risk-user-radio-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search User\" />\r\n </div>\r\n <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n <ul class=\"user-radio-list\" [class.full-height]=\"false\" *ngIf=\"searchList?.length >0 \">\r\n <li *ngFor=\"let user of usersList | filter:search\">\r\n <app-cs-radio (checkedEvent)=\"selectUser(user)\" [name]=\"'category'\"\r\n [checked]=\"selectedUser && (selectedUser[userIdKey]== user[userIdKey])\">\r\n <span class=\"name\" [appTooltip]=\"user[itemEmailKey]\" placement=\"bottom-left\" type=\"black\"\r\n delay=\"0\" [tooltipMandatory]=true>\r\n {{user[itemNameKey] }}</span>\r\n </app-cs-radio>\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'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n\r\n </ng-container>\r\n </div>\r\n <div class=\"add-risk-user-radio-list-body\" *ngIf=\"usersList?.length === 0\">\r\n <app-no-data \r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n \r\n <app-floating-bar [selectedData]=\"selectedUser ? [selectedUser]:[]\" [displayElementKey]=\"itemNameKey\"\r\n [elementId]=\"userIdKey\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save()\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\"\r\n [isDisabled]=\"usersList.length === 0 || (selectedUser ? [selectedUser]:[]).length === 0\">\r\n </app-floating-bar>\r\n\r\n\r\n</div>",
16649
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-user-radio-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-user-radio-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-user-radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-user-radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-user-radio-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-user-radio-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-user-radio-list-body .search-block{position:relative}::ng-deep .add-risk-user-radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-user-radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-user-radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-user-radio-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-user-radio-list-body ul{padding:0;margin:0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li{width:50%;padding:8px 0;list-style:none}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio{display:flex}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label{width:100%}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-user-radio-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-user-radio-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
16757
+ template: "<div class=\"add-risk-user-radio-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-user-radio-list-head\">\r\n <h3 class=\"add-risk-user-radio-list-title\">Select User</h3>\r\n <!-- <button class=\"add-risk-user-radio-list-close\" (click)=\"close()\">\r\n <i class=\"icons\">&#xe90d;</i>\r\n </button> -->\r\n </div>\r\n <div *ngIf=\"usersList?.length > 0\" class=\"add-risk-user-radio-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search User\" />\r\n </div>\r\n <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n <ul class=\"user-radio-list\" [class.full-height]=\"false\" *ngIf=\"searchList?.length >0 \">\r\n <li *ngFor=\"let user of usersList | filter:search\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':disabledId?.includes(user[userIdKey])\" placement=\"bottom-left\" type=\"black\"\r\n delay=\"0\" [tooltipMandatory]=true >\r\n <app-cs-radio (checkedEvent)=\"selectUser(user)\" [name]=\"'category'\" [class.disabled]=\"(disabledId?.includes(user[userIdKey]))\"\r\n [checked]=\"selectedUser && (selectedUser[userIdKey]== user[userIdKey])\">\r\n <span class=\"name\" >\r\n {{user[itemNameKey] }}</span>\r\n </app-cs-radio>\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'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n\r\n </ng-container>\r\n </div>\r\n <div class=\"add-risk-user-radio-list-body\" *ngIf=\"usersList?.length === 0\">\r\n <app-no-data \r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n \r\n <app-floating-bar [selectedData]=\"selectedUser ? [selectedUser]:[]\" [displayElementKey]=\"itemNameKey\"\r\n [elementId]=\"userIdKey\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save()\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\"\r\n [isDisabled]=\"usersList?.length === 0 || (selectedUser ? [selectedUser]:[])?.length === 0\">\r\n </app-floating-bar>\r\n\r\n\r\n</div>",
16758
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-user-radio-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-user-radio-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-user-radio-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-user-radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-user-radio-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-user-radio-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-user-radio-list-body .search-block{position:relative}::ng-deep .add-risk-user-radio-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-user-radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-user-radio-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-user-radio-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-user-radio-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-user-radio-list-body ul{padding:0;margin:0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;padding:16px 0 0}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li{width:50%;padding:8px 0;list-style:none}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio{display:flex}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label{width:100%}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-user-radio-list-body ul.user-radio-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-user-radio-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-user-radio-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-user-radio-list app-cs-radio.disabled{pointer-events:none;opacity:.4}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
16650
16759
  },] }
16651
16760
  ];
16652
16761
  UserRadioListComponent.ctorParameters = function () { return []; };
@@ -16657,7 +16766,12 @@
16657
16766
  itemNameKey: [{ type: i0.Input }],
16658
16767
  itemEmailKey: [{ type: i0.Input }],
16659
16768
  saveSelectedList: [{ type: i0.Output }],
16660
- closeUsersList: [{ type: i0.Output }]
16769
+ closeUsersList: [{ type: i0.Output }],
16770
+ disabledId: [{ type: i0.Input }],
16771
+ fromResponsibility: [{ type: i0.Input }],
16772
+ reviewerIds: [{ type: i0.Input }],
16773
+ overseerIds: [{ type: i0.Input }],
16774
+ assignorId: [{ type: i0.Input }]
16661
16775
  };
16662
16776
 
16663
16777
  var DataTypePipe = /** @class */ (function () {
@@ -28464,7 +28578,12 @@
28464
28578
  this.searchKey = '';
28465
28579
  this.usersList = [];
28466
28580
  this.groupsList = [];
28581
+ this.assignorId = [];
28582
+ this.assigneeIds = [];
28583
+ this.reviewerIds = [];
28584
+ this.overseerIds = [];
28467
28585
  this.fetchUserData = new i0.EventEmitter();
28586
+ this.disabledIds = [];
28468
28587
  this.nonRemovableUserIds = [];
28469
28588
  this.selectedUsers = [];
28470
28589
  this.selectedUserIds = [];
@@ -28670,6 +28789,8 @@
28670
28789
  };
28671
28790
  UserGroupListComponent.prototype.ngOnInit = function () {
28672
28791
  var _this = this;
28792
+ var disabledIds = __spreadArray(__spreadArray([], __read(this.disabledIds)), __read(this.nonRemovableUserIds));
28793
+ this.disabledIds = __spreadArray([], __read(new Set(disabledIds)));
28673
28794
  this.paginationVisible();
28674
28795
  this.animation = true;
28675
28796
  setTimeout(function () {
@@ -28741,7 +28862,7 @@
28741
28862
  UserGroupListComponent.decorators = [
28742
28863
  { type: i0.Component, args: [{
28743
28864
  selector: 'user-group-list',
28744
- template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\r\n <div class=\"user-group-list-head\">\r\n <h3 class=\"user-group-list-title\">{{panelTitle}}</h3>\r\n </div>\r\n <div class=\"user-group-list-body\">\r\n <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n </div>\r\n\r\n <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{userListInfo?.total_items || usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{groupListInfo?.total_items || groupsList?.length}}</span></button>\r\n </div>\r\n\r\n\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n <vui-pagination *ngIf=\"userListInfo?.total_pages > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\" (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n <ng-container *ngIf=\"users?.length > 0;else nouser\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n </vui-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 user of users \">\r\n <vui-checkbox *ngIf=\"!singleSelect\" (change)=\"selectItem($event,user)\" [disabled]=\"nonRemovableUserIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds.includes(user?.member_id)\"><div class=\"user-name\" [appTooltip]=\"user?.member_email ? user?.member_email : user?.employee_email\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{user?.member_name}}</div></vui-checkbox>\r\n <app-cs-radio *ngIf=\"singleSelect\" [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event,user)\"\r\n [name]=\"'rx-category'\" [checked]=\"selectedUserIds.includes(user?.member_id)\"\r\n [appTooltip]=\"user?.member_email\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">\r\n {{user?.member_name}}\r\n </app-cs-radio>\r\n </li>\r\n\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-template #nouser>\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 Users found.')\"></app-no-data>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n <ng-container *ngIf=\"(groupsList|search:searchKey:'group_name') as groups\">\r\n <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\" (change)=\"selectAllGroup($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n </vui-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 group of groups\">\r\n <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds.includes(group?.group_id)\">\r\n <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">\r\n <div class=\"group-name\">{{group?.group_name}} </div>\r\n <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n </vui-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-template #nogroup>\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-template>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"user-group-list-footer\">\r\n <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n <ng-container *ngIf=\"!groupEnabled\">\r\n <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\r\n <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n placement=\"left\">+{{selectedUsers?.slice(1).length}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupEnabled\">\r\n <div class=\"counter\" *ngIf=\"selectedUsers?.length\" appPopover (click)=\"userCount.popover()\"\r\n placement=\"left\">{{selectedUsers?.length}}</div>\r\n </ng-container>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedUsers?.length === 1\">User {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n\r\n <div class=\"counter group\" *ngIf=\"selectedGroups?.length\" appPopover (click)=\"groupCount.popover()\"\r\n placement=\"left\">{{selectedGroups?.length}}</div>\r\n <div class=\"name\" >\r\n <span *ngIf=\"selectedGroups?.length === 1\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'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 selectedUsers let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUserIds.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedUsers.slice(1) let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUserIds.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedGroups; let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds.includes(element?.group_id)\"\r\n (click)=\"selectGroup({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </vui-floating-bar>\r\n <vui-floating-bar *ngIf=\"singleSelect\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n <ng-container>\r\n <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe90d;</i>\r\n <span class=\"value\"> {{selectedUsers[0]?.member_name}}</span>\r\n </ng-container>\r\n </div>\r\n </vui-floating-bar>\r\n </div>\r\n\r\n <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n <div class=\"text\">This action will reset the default {{userType}} selected for the Program.</div>\r\n </div>\r\n <div class=\"confirmation-bottom\">\r\n <div class=\"message\">Are you sure you would like to proceed?</div>\r\n <div class=\"button-group\">\r\n <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
28865
+ template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\r\n <div class=\"user-group-list-head\">\r\n <h3 class=\"user-group-list-title\">{{panelTitle}}</h3>\r\n </div>\r\n <div class=\"user-group-list-body\">\r\n <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n </div>\r\n\r\n <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS\r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{userListInfo?.total_items || usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{groupListInfo?.total_items || groupsList?.length}}</span></button>\r\n </div>\r\n\r\n\r\n\r\n <ng-container *ngIf=\"currentTab === 'USER'\">\r\n <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n <vui-pagination *ngIf=\"userListInfo?.total_pages > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\" (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n <ng-container *ngIf=\"users?.length > 0;else nouser\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n </vui-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 <ng-container *ngFor=\"let user of users \" >\r\n <li class=\"vx-mb-4\" *ngIf=\"!singleSelect\" [appTooltip]=\"user |tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'member_id':disabledIds?.includes(user?.member_id)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n <vui-checkbox (change)=\"selectItem($event,user)\" [disabled]=\"disabledIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"><div class=\"user-name\" >{{user?.member_name}}</div></vui-checkbox>\r\n </li>\r\n <li class=\"vx-mb-4\" *ngIf=\"singleSelect\">\r\n <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event,user)\"\r\n [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n [appTooltip]=\"user?.member_email\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=\"true\">\r\n {{user?.member_name}}\r\n </app-cs-radio>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-template #nouser>\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 Users found.')\"></app-no-data>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n <ng-container *ngIf=\"(groupsList|search:searchKey:'group_name') as groups\">\r\n <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n <div class=\"user-list-select vx-mb-2\">\r\n <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\" (change)=\"selectAllGroup($event)\">\r\n <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</div>\r\n </vui-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 group of groups\">\r\n <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">\r\n <div class=\"group-name\">{{group?.group_name}} </div>\r\n <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></div>\r\n </vui-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-template #nogroup>\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-template>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"user-group-list-footer\">\r\n <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n <ng-container *ngIf=\"!groupEnabled\">\r\n <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\r\n <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupEnabled\">\r\n <div class=\"counter\" *ngIf=\"selectedUsers?.length\" appPopover (click)=\"userCount.popover()\"\r\n placement=\"left\">{{selectedUsers?.length}}</div>\r\n </ng-container>\r\n <div class=\"name\">\r\n <span *ngIf=\"selectedUsers?.length === 1\">User {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n\r\n <div class=\"counter group\" *ngIf=\"selectedGroups?.length\" appPopover (click)=\"groupCount.popover()\"\r\n placement=\"left\">{{selectedGroups?.length}}</div>\r\n <div class=\"name\" >\r\n <span *ngIf=\"selectedGroups?.length === 1\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'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 selectedUsers let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedUsers.slice(1) let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n (click)=\"selectItem({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let element of selectedGroups; let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\r\n (click)=\"selectGroup({target:{checked:false}},element)\">&#xe90d;</i>\r\n {{element?.group_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </vui-floating-bar>\r\n <vui-floating-bar *ngIf=\"singleSelect\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n <ng-container>\r\n <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#xe90d;</i>\r\n <span class=\"value\"> {{selectedUsers[0]?.member_name}}</span>\r\n </ng-container>\r\n </div>\r\n </vui-floating-bar>\r\n </div>\r\n\r\n <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n <div class=\"text\">This action will reset the default {{userType}} selected for the Program.</div>\r\n </div>\r\n <div class=\"confirmation-bottom\">\r\n <div class=\"message\">Are you sure you would like to proceed?</div>\r\n <div class=\"button-group\">\r\n <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
28745
28866
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");::ng-deep .user-group-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .user-group-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .user-group-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 13.5rem);overflow:auto;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value{color:#747576!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#747576!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.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;min-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{background:#fff;width:100%;height: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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.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-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;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{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}"]
28746
28867
  },] }
28747
28868
  ];
@@ -28758,9 +28879,15 @@
28758
28879
  reviewerWorkflowTypeChange: [{ type: i0.Output }],
28759
28880
  mode: [{ type: i0.Input }],
28760
28881
  fieldType: [{ type: i0.Input }],
28882
+ fromResponsibility: [{ type: i0.Input }],
28883
+ assignorId: [{ type: i0.Input }],
28884
+ assigneeIds: [{ type: i0.Input }],
28885
+ reviewerIds: [{ type: i0.Input }],
28886
+ overseerIds: [{ type: i0.Input }],
28761
28887
  userListInfo: [{ type: i0.Input }],
28762
28888
  groupListInfo: [{ type: i0.Input }],
28763
28889
  fetchUserData: [{ type: i0.Output }],
28890
+ disabledIds: [{ type: i0.Input }],
28764
28891
  nonRemovableUserIds: [{ type: i0.Input }],
28765
28892
  nonRemovableGroupIds: [{ type: i0.Input }],
28766
28893
  loading: [{ type: i0.Input }],
@@ -29852,6 +29979,75 @@
29852
29979
  },] }
29853
29980
  ];
29854
29981
 
29982
+ var TooltipMessagePipe = /** @class */ (function () {
29983
+ function TooltipMessagePipe() {
29984
+ }
29985
+ TooltipMessagePipe.prototype.transform = function (value) {
29986
+ var args = [];
29987
+ for (var _i = 1; _i < arguments.length; _i++) {
29988
+ args[_i - 1] = arguments[_i];
29989
+ }
29990
+ var responsibilityType = args[0];
29991
+ var currentUser = value;
29992
+ var reviewerIds = args[1];
29993
+ var overseerIds = args[2];
29994
+ var assignorId = args[3] ? args[3] : [];
29995
+ var assigneeIds = args[4] ? args[4] : [];
29996
+ var member_id = args[5] ? args[5] : 'member_id';
29997
+ var isDisabled = args[6] ? args[6] : false;
29998
+ switch (responsibilityType) {
29999
+ case "Assignee":
30000
+ if ((reviewerIds === null || reviewerIds === void 0 ? void 0 : reviewerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && !(assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30001
+ return "This user is already selected as the reviewer for this responsibility";
30002
+ }
30003
+ else if ((assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && (reviewerIds === null || reviewerIds === void 0 ? void 0 : reviewerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30004
+ return "This user is already selected as the assignor and reviewer for this responsibility";
30005
+ }
30006
+ if (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) {
30007
+ return "This user is already selected as the overseer for this responsibility";
30008
+ }
30009
+ return currentUser === null || currentUser === void 0 ? void 0 : currentUser.employee_email;
30010
+ case "Reviewer":
30011
+ if ((assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && !(assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30012
+ return "This user is already selected as the assignee for this responsibility";
30013
+ }
30014
+ else if ((assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30015
+ return "This user is already selected as the assignor and assignee for this responsibility";
30016
+ }
30017
+ if (overseerIds === null || overseerIds === void 0 ? void 0 : overseerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) {
30018
+ return "This user is already selected as the overseer for this responsibility";
30019
+ }
30020
+ return (currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email) ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email : currentUser === null || currentUser === void 0 ? void 0 : currentUser.employee_email;
30021
+ case "Overseer":
30022
+ if ((assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && !(assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30023
+ return "This user is already selected as the assignee for this responsibility";
30024
+ }
30025
+ else if ((assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && (assigneeIds === null || assigneeIds === void 0 ? void 0 : assigneeIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30026
+ return "This user is already selected as the assignor and assignee for this responsibility";
30027
+ }
30028
+ if ((reviewerIds === null || reviewerIds === void 0 ? void 0 : reviewerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && !(assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30029
+ return "This user is already selected as the reviewer for this responsibility";
30030
+ }
30031
+ else if ((assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) && (reviewerIds === null || reviewerIds === void 0 ? void 0 : reviewerIds.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id]))) {
30032
+ return "This user is already selected as the assignor and reviewer for this responsibility";
30033
+ }
30034
+ if (assignorId === null || assignorId === void 0 ? void 0 : assignorId.includes(currentUser === null || currentUser === void 0 ? void 0 : currentUser[member_id])) {
30035
+ return "This user is already selected as the assignor for this responsibility";
30036
+ }
30037
+ return (currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email) ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email : currentUser === null || currentUser === void 0 ? void 0 : currentUser.employee_email;
30038
+ default:
30039
+ return isDisabled ? "" : (currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email) ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.member_email : currentUser === null || currentUser === void 0 ? void 0 : currentUser.employee_email;
30040
+ }
30041
+ return "";
30042
+ };
30043
+ return TooltipMessagePipe;
30044
+ }());
30045
+ TooltipMessagePipe.decorators = [
30046
+ { type: i0.Pipe, args: [{
30047
+ name: 'tooltipMessage'
30048
+ },] }
30049
+ ];
30050
+
29855
30051
  // import { AssessmentListModule } from './assessment-list/assessment-list.module';
29856
30052
  // import { AssessmentPreviewModule } from '../../sharedComponents/assessment-preview/assessment-preview.module';
29857
30053
  var CreateProgramUiModule = /** @class */ (function () {
@@ -29890,7 +30086,8 @@
29890
30086
  SearchNewPipe,
29891
30087
  SelectedAssessmentPipe,
29892
30088
  AssessmentResolverPipe,
29893
- FilterPipe
30089
+ FilterPipe,
30090
+ TooltipMessagePipe
29894
30091
  ],
29895
30092
  imports: [
29896
30093
  common.CommonModule,
@@ -29924,7 +30121,8 @@
29924
30121
  Pagination,
29925
30122
  DefineFrameworkListingComponent,
29926
30123
  CustomFieldComponent,
29927
- AssessmentResolverPipe
30124
+ AssessmentResolverPipe,
30125
+ TooltipMessagePipe
29928
30126
  // AssessmentListModule
29929
30127
  ]
29930
30128
  },] }
@@ -32073,10 +32271,11 @@
32073
32271
  exports.ɵky = AssessmentResolverPipe;
32074
32272
  exports.ɵkz = FilterPipe;
32075
32273
  exports.ɵl = WorkflowPolicyComponent;
32076
- exports.ɵla = PaginationModule;
32077
- exports.ɵlb = PaginationComponent;
32078
- exports.ɵlc = NoDataModule;
32079
- exports.ɵld = NoDataComponent;
32274
+ exports.ɵla = TooltipMessagePipe;
32275
+ exports.ɵlb = PaginationModule;
32276
+ exports.ɵlc = PaginationComponent;
32277
+ exports.ɵld = NoDataModule;
32278
+ exports.ɵle = NoDataComponent;
32080
32279
  exports.ɵm = PolicyService;
32081
32280
  exports.ɵn = MoreOptionComponent;
32082
32281
  exports.ɵo = OwnerListComponent;