vcomply-workflow-engine 2.3.25 → 2.4.0

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 (15) hide show
  1. package/bundles/vcomply-workflow-engine.umd.js +201 -84
  2. package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
  3. package/esm2015/lib/sharedComponents/program-listing/program-listing.component.js +89 -17
  4. package/esm2015/lib/sharedComponents/program-listing/program-listing.component.ngfactory.js +36 -26
  5. package/esm2015/lib/sharedComponents/program-listing/program-listing.component.ngsummary.json +1 -1
  6. package/esm2015/lib/workflow-compliance/workflow-compliance.component.js +112 -69
  7. package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngfactory.js +100 -153
  8. package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngsummary.json +1 -1
  9. package/esm2015/lib/workflow-services/responsibility.service.js +1 -1
  10. package/fesm2015/vcomply-workflow-engine.js +199 -84
  11. package/fesm2015/vcomply-workflow-engine.js.map +1 -1
  12. package/lib/sharedComponents/program-listing/program-listing.component.d.ts +4 -2
  13. package/lib/workflow-compliance/workflow-compliance.component.d.ts +0 -1
  14. package/package.json +2 -2
  15. package/vcomply-workflow-engine.metadata.json +1 -1
package/fesm2015/vcomply-workflow-engine.js CHANGED
@@ -2705,9 +2705,19 @@ class WorkflowComplianceComponent {
2705
2705
  return user;
2706
2706
  });
2707
2707
  if (this.responsibilityForm.program[0].default_assignee_ids) {
2708
- const assignors = this.assigneesList.filter((element) => this.responsibilityForm.program[0].default_assignee_ids.includes(element.my_member_id));
2709
- if (assignors.length) {
2710
- this.responsibilityForm.assignees.list = assignors;
2708
+ if (this.responsibilityForm.assignees.list.length) {
2709
+ const ids = this.returnIds(this.responsibilityForm.assignees.list, 'my_member_id');
2710
+ const allIds = [...new Set(ids), ...new Set(this.responsibilityForm.program[0].default_assignee_ids)];
2711
+ const assignors = this.assigneesList.filter((element) => allIds.includes(element.my_member_id));
2712
+ if (assignors.length) {
2713
+ this.responsibilityForm.assignees.list = assignors;
2714
+ }
2715
+ }
2716
+ else {
2717
+ const assignors = this.assigneesList.filter((element) => this.responsibilityForm.program[0].default_assignee_ids.includes(element.my_member_id));
2718
+ if (assignors.length) {
2719
+ this.responsibilityForm.assignees.list = assignors;
2720
+ }
2711
2721
  }
2712
2722
  }
2713
2723
  const checkedMoreOptions = [];
@@ -2720,10 +2730,15 @@ class WorkflowComplianceComponent {
2720
2730
  }
2721
2731
  if (this.responsibilityForm.program[0].default_overseers) {
2722
2732
  const overseers = this.assigneesList.filter((element) => this.responsibilityForm.program[0].default_overseers.cc_email.includes(element.my_member_id));
2733
+ const notifyOverseers = this.assigneesList.filter((element) => this.responsibilityForm.program[0].default_overseers.failure_cc_email.includes(element.my_member_id));
2723
2734
  if (overseers.length) {
2724
2735
  this.responsibilityForm.overseers.list = overseers;
2725
2736
  this.moreOptions.OVERSEER = true;
2726
2737
  }
2738
+ if (notifyOverseers.length) {
2739
+ this.responsibilityForm.notifyList.list = notifyOverseers;
2740
+ this.moreOptions.OVERSEER = true;
2741
+ }
2727
2742
  }
2728
2743
  for (const key in this.moreOptions) {
2729
2744
  if (this.moreOptions[key]) {
@@ -2741,6 +2756,7 @@ class WorkflowComplianceComponent {
2741
2756
  params = params.append('program_ids', program_id);
2742
2757
  }
2743
2758
  this.responsibilityService.getOrganizationGroups(params).pipe(takeUntil(this.unSubscribeProgram)).subscribe((res) => {
2759
+ var _a, _b;
2744
2760
  const data = res !== null && res !== void 0 ? res : [];
2745
2761
  const groups = [];
2746
2762
  data === null || data === void 0 ? void 0 : data.forEach((element) => {
@@ -2752,6 +2768,32 @@ class WorkflowComplianceComponent {
2752
2768
  });
2753
2769
  this.groupsList = groups;
2754
2770
  this.groupsListLoaded = true;
2771
+ 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) {
2772
+ const selectedGroups = data.filter((element) => this.responsibilityForm.program[0].default_assignee_group_ids.includes(element.group_id));
2773
+ if (groups.length) {
2774
+ let memberIds = [];
2775
+ selectedGroups.forEach((eachGroup) => {
2776
+ var _a;
2777
+ if ((_a = eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids) === null || _a === void 0 ? void 0 : _a.length) {
2778
+ memberIds = [...new Set(memberIds.concat(eachGroup === null || eachGroup === void 0 ? void 0 : eachGroup.member_ids))];
2779
+ }
2780
+ });
2781
+ if (this.responsibilityForm.assignees.list.length) {
2782
+ const ids = this.returnIds(this.responsibilityForm.assignees.list, 'my_member_id');
2783
+ const allIds = [...new Set(ids), ...new Set(memberIds)];
2784
+ const assignors = this.assigneesList.filter((element) => allIds.includes(element.my_member_id));
2785
+ if (assignors.length) {
2786
+ this.responsibilityForm.assignees.list = assignors;
2787
+ }
2788
+ }
2789
+ else {
2790
+ const assignors = this.assigneesList.filter((element) => memberIds.includes(element.my_member_id));
2791
+ if (assignors.length) {
2792
+ this.responsibilityForm.assignees.list = assignors;
2793
+ }
2794
+ }
2795
+ }
2796
+ }
2755
2797
  }, err => {
2756
2798
  console.error(err);
2757
2799
  this.groupsListLoaded = true;
@@ -2759,7 +2801,7 @@ class WorkflowComplianceComponent {
2759
2801
  }
2760
2802
  getEditResponsibilityDetails(id) {
2761
2803
  this.responsibilityService.editResponsibility(id).subscribe((res) => {
2762
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
2804
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
2763
2805
  this.isDuplicateEntrust = true;
2764
2806
  if (res) {
2765
2807
  const currentUser = (_a = this.authService.getUserDetails()) === null || _a === void 0 ? void 0 : _a.user;
@@ -2793,25 +2835,28 @@ class WorkflowComplianceComponent {
2793
2835
  description: res === null || res === void 0 ? void 0 : res.remarks,
2794
2836
  objective: res === null || res === void 0 ? void 0 : res.objective,
2795
2837
  rc: this.setList(this.responsibilityCentersList, [Number(res === null || res === void 0 ? void 0 : res.rc_id)], 'rc_id'),
2796
- category: this.setList(this.allCategories, (res === null || res === void 0 ? void 0 : res.category_id.split(',').map(Number)), 'category_id'),
2838
+ 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((ele) => !res.program_cat_ids.includes(ele)) : res === null || res === void 0 ? void 0 : res.category_ids_array,
2839
+ program_selected_ids: (_f = res === null || res === void 0 ? void 0 : res.category_id.split(',')) !== null && _f !== void 0 ? _f : [],
2840
+ category_id: (_g = res === null || res === void 0 ? void 0 : res.category_id) !== null && _g !== void 0 ? _g : '',
2841
+ program: (res === null || res === void 0 ? void 0 : res.programDetails) ? [res === null || res === void 0 ? void 0 : res.programDetails] : [],
2797
2842
  checkpointInstruction: res === null || res === void 0 ? void 0 : res.checkpoint_description,
2798
2843
  customTags: (res === null || res === void 0 ? void 0 : res.custom_tags) ? JSON.parse(res === null || res === void 0 ? void 0 : res.custom_tags) : '',
2799
2844
  checkpoints: (res === null || res === void 0 ? void 0 : res.checkpoint_details) ? JSON.parse(res === null || res === void 0 ? void 0 : res.checkpoint_details) : '',
2800
2845
  reviewers: {
2801
- sequentialWorkflow: (((_f = (_e = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _e === void 0 ? void 0 : _e.level1) === null || _f === void 0 ? void 0 : _f.type) == 'SEQUENTIAL') ? true : false,
2846
+ sequentialWorkflow: (((_j = (_h = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _h === void 0 ? void 0 : _h.level1) === null || _j === void 0 ? void 0 : _j.type) == 'SEQUENTIAL') ? true : false,
2802
2847
  reviewFrequency: {
2803
2848
  reviewCompleteDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_after_days : 2,
2804
2849
  reviewNOtCompletedDays: ((reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0) ? res === null || res === void 0 ? void 0 : res.review_failed_after_days : 2
2805
2850
  },
2806
- acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? (_h = (_g = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _g === void 0 ? void 0 : _g.level1) === null || _h === void 0 ? void 0 : _h.reviewers : [],
2807
- list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? this.setReviewerPayload((_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.reviewers, 'object', (_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) : []
2851
+ acceptedData: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? (_l = (_k = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _k === void 0 ? void 0 : _k.level1) === null || _l === void 0 ? void 0 : _l.reviewers : [],
2852
+ list: (reviewerDetails === null || reviewerDetails === void 0 ? void 0 : reviewerDetails.length) > 0 ? this.setReviewerPayload((_o = (_m = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _m === void 0 ? void 0 : _m.level1) === null || _o === void 0 ? void 0 : _o.reviewers, 'object', (_q = (_p = res === null || res === void 0 ? void 0 : res.reviewer_arr) === null || _p === void 0 ? void 0 : _p.level1) === null || _q === void 0 ? void 0 : _q.type) : []
2808
2853
  },
2809
2854
  overseers: {
2810
2855
  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') : [],
2811
2856
  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') : [],
2812
2857
  },
2813
2858
  formatAndEvidence: {
2814
- formatRequired: ((res === null || res === void 0 ? void 0 : res.report_format.length) > 0 || ((_o = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _o === void 0 ? void 0 : _o.length) > 0) ? true : false,
2859
+ formatRequired: ((res === null || res === void 0 ? void 0 : res.report_format.length) > 0 || ((_r = res === null || res === void 0 ? void 0 : res.link_for_details) === null || _r === void 0 ? void 0 : _r.length) > 0) ? true : false,
2815
2860
  formatFiles: res === null || res === void 0 ? void 0 : res.report_format,
2816
2861
  formatLinks: res === null || res === void 0 ? void 0 : res.link_for_details,
2817
2862
  evidenceRequired: (res === null || res === void 0 ? void 0 : res.report_upload_flag) ? true : false,
@@ -2821,6 +2866,7 @@ class WorkflowComplianceComponent {
2821
2866
  riskClass: res === null || res === void 0 ? void 0 : res.risk_class,
2822
2867
  riskMatrix: res === null || res === void 0 ? void 0 : res.risk_matrix_data
2823
2868
  };
2869
+ this.selectedProgram = (res === null || res === void 0 ? void 0 : res.programDetails) ? res.programDetails : undefined;
2824
2870
  this.isNotificationPending = res.notification_pending;
2825
2871
  if (this.isNotificationPending) {
2826
2872
  this.actionButtons[1].buttonText = 'View Responsibilities in Queue';
@@ -2843,7 +2889,7 @@ class WorkflowComplianceComponent {
2843
2889
  this.organizationId = this.authService.getOrganizationId();
2844
2890
  this.memberId = this.authService.getMemberId();
2845
2891
  }
2846
- if (((_p = this.responsibilityForm.assignees.list) === null || _p === void 0 ? void 0 : _p.length) === 0) {
2892
+ if (((_s = this.responsibilityForm.assignees.list) === null || _s === void 0 ? void 0 : _s.length) === 0) {
2847
2893
  this.isEntrust = true;
2848
2894
  this.mode = 'CREATE';
2849
2895
  this.assigneeRadioSelect = false;
@@ -2872,7 +2918,7 @@ class WorkflowComplianceComponent {
2872
2918
  frequency_time: ''
2873
2919
  };
2874
2920
  }
2875
- if ((_q = res.assessment) === null || _q === void 0 ? void 0 : _q.assessment_id) {
2921
+ if ((_t = res.assessment) === null || _t === void 0 ? void 0 : _t.assessment_id) {
2876
2922
  this.getAssessmentDetails(res.assessment, res.questionnaire_type);
2877
2923
  }
2878
2924
  if (!this.responsibilityForm.checkpoints) {
@@ -2887,8 +2933,6 @@ class WorkflowComplianceComponent {
2887
2933
  }
2888
2934
  });
2889
2935
  }
2890
- setMoreOptions() {
2891
- }
2892
2936
  setList(list, ids, key) {
2893
2937
  const data = [];
2894
2938
  ids === null || ids === void 0 ? void 0 : ids.forEach((element) => {
@@ -2928,7 +2972,7 @@ class WorkflowComplianceComponent {
2928
2972
  }
2929
2973
  }
2930
2974
  checkWhetherAllListsLoaded() {
2931
- var _a, _b, _c, _d;
2975
+ var _a, _b, _c, _d, _e, _f;
2932
2976
  if (this.rcListLoaded && this.assigneesListLoaded && this.assignorsListLoaded &&
2933
2977
  this.categoriesListLoaded && this.assuranceCategoryListLoaded && this.groupsListLoaded) {
2934
2978
  if (this.frameworkDetails.length > 0) {
@@ -2942,7 +2986,9 @@ class WorkflowComplianceComponent {
2942
2986
  this.uiKitService.isLoader = false;
2943
2987
  if (this.selectedProgram) {
2944
2988
  this.responsibilityForm.program.push(this.selectedProgram);
2945
- const programCustomTags = ((_a = this.selectedProgram) === null || _a === void 0 ? void 0 : _a.custom_tags) ? JSON.parse(this.selectedProgram.custom_tags) : [];
2989
+ this.responsibilityForm.program_selected_ids.push(this.selectedProgram.category_id);
2990
+ 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();
2991
+ const programCustomTags = ((_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.custom_tags) ? JSON.parse(this.selectedProgram.custom_tags) : [];
2946
2992
  programCustomTags.forEach((tag) => {
2947
2993
  const tagData = JSON.parse(tag);
2948
2994
  const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
@@ -2950,16 +2996,16 @@ class WorkflowComplianceComponent {
2950
2996
  this.responsibilityForm.customTags.push(tagData);
2951
2997
  }
2952
2998
  });
2953
- this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_b = this.selectedProgram) === null || _b === void 0 ? void 0 : _b.evidence_upload_flag) ? true : false;
2999
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d.evidence_upload_flag) ? true : false;
2954
3000
  const checkedMoreOptions = [];
2955
3001
  this.moreOptions.PROGRAM = true;
2956
3002
  checkedMoreOptions.push('PROGRAM');
2957
- if ((_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.evidence_upload_flag) {
3003
+ if ((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.evidence_upload_flag) {
2958
3004
  checkedMoreOptions.push('FORMATE_EVIDENCE');
2959
3005
  this.moreOptions.FORMATE_EVIDENCE = true;
2960
3006
  }
2961
3007
  this.populateOption.emit(checkedMoreOptions);
2962
- this.filterListsAccordingToProgram((_d = this.selectedProgram) === null || _d === void 0 ? void 0 : _d._id);
3008
+ this.filterListsAccordingToProgram((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f._id);
2963
3009
  }
2964
3010
  }
2965
3011
  }
@@ -2970,7 +3016,7 @@ class WorkflowComplianceComponent {
2970
3016
  }
2971
3017
  }
2972
3018
  saveSelectedList(type, selectedItems) {
2973
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
3019
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
2974
3020
  switch (type) {
2975
3021
  case 'assignors':
2976
3022
  if (this.invalidType === 'whom') {
@@ -3032,8 +3078,8 @@ class WorkflowComplianceComponent {
3032
3078
  else {
3033
3079
  this.responsibilityForm.category_id = (_e = (_d = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _d === void 0 ? void 0 : _d.category_id) === null || _e === void 0 ? void 0 : _e.toString();
3034
3080
  }
3035
- this.responsibilityForm.program_selected_ids = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories;
3036
- const programCustomTags = ((_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _f === void 0 ? void 0 : _f.custom_tags) ? JSON.parse(selectedItems.program.custom_tags) : [];
3081
+ this.responsibilityForm.program_selected_ids = [...new Set(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories), ...new Set([(_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _f === void 0 ? void 0 : _f.category_id])];
3082
+ const programCustomTags = ((_g = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _g === void 0 ? void 0 : _g.custom_tags) ? JSON.parse(selectedItems.program.custom_tags) : [];
3037
3083
  programCustomTags.forEach((tag) => {
3038
3084
  const tagData = JSON.parse(tag);
3039
3085
  const index = this.responsibilityForm.customTags.findIndex((tagElement) => tagElement.tag_name == tagData.tag_name);
@@ -3041,14 +3087,11 @@ class WorkflowComplianceComponent {
3041
3087
  this.responsibilityForm.customTags.push(tagData);
3042
3088
  }
3043
3089
  });
3044
- this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_g = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _g === void 0 ? void 0 : _g.evidence_upload_flag) ? true : false;
3045
- if ((_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _h === void 0 ? void 0 : _h.evidence_upload_flag) {
3090
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = ((_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _h === void 0 ? void 0 : _h.evidence_upload_flag) ? true : false;
3091
+ if ((_j = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _j === void 0 ? void 0 : _j.evidence_upload_flag) {
3046
3092
  this.moreOptions.FORMATE_EVIDENCE = true;
3047
3093
  }
3048
- if (((_j = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _j === void 0 ? void 0 : _j.length) == 0) {
3049
- this.responsibilityForm.program_selected_ids.push((_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.category_id);
3050
- }
3051
- if ((_l = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _l === void 0 ? void 0 : _l._id) {
3094
+ if ((_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k._id) {
3052
3095
  this.filterListsAccordingToProgram(selectedItems.program._id);
3053
3096
  }
3054
3097
  else {
@@ -3089,10 +3132,10 @@ class WorkflowComplianceComponent {
3089
3132
  this.responsibilityForm.riskMatrix = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.riskMatrix;
3090
3133
  break;
3091
3134
  case 'formate_evidence':
3092
- this.responsibilityForm.formatAndEvidence.formatRequired = (_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _m !== void 0 ? _m : false;
3093
- this.responsibilityForm.formatAndEvidence.formatFiles = (_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _o !== void 0 ? _o : [];
3094
- this.responsibilityForm.formatAndEvidence.formatLinks = (_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _p !== void 0 ? _p : [];
3095
- this.responsibilityForm.formatAndEvidence.evidenceRequired = (_q = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _q !== void 0 ? _q : false;
3135
+ this.responsibilityForm.formatAndEvidence.formatRequired = (_l = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _l !== void 0 ? _l : false;
3136
+ this.responsibilityForm.formatAndEvidence.formatFiles = (_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _m !== void 0 ? _m : [];
3137
+ this.responsibilityForm.formatAndEvidence.formatLinks = (_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _o !== void 0 ? _o : [];
3138
+ this.responsibilityForm.formatAndEvidence.evidenceRequired = (_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _p !== void 0 ? _p : false;
3096
3139
  break;
3097
3140
  case 'reviewFrequency':
3098
3141
  this.responsibilityForm.reviewers.reviewFrequency = {
@@ -3405,7 +3448,8 @@ class WorkflowComplianceComponent {
3405
3448
  let payload = {
3406
3449
  app_association: [],
3407
3450
  assigned_to: this.returnIds(entrustForm.assignees.list, 'employee_id').toString(),
3408
- category_id: (moreOptions.CATEGORY) ? this.returnIds(entrustForm.category, 'category_id').toString() : ((((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program_selected_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) ? (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.category_id : ''),
3451
+ program_cat_ids: ((_a = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _a === void 0 ? void 0 : _a.length) ? [entrustForm.program[0].category_id] : [],
3452
+ category_id: (((_c = (_b = this.responsibilityForm) === null || _b === void 0 ? void 0 : _b.program_selected_ids) === null || _c === void 0 ? void 0 : _c.length) > 0) ? (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.category_id : '',
3409
3453
  cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.list, 'employee_id').toString() : '',
3410
3454
  checkpoint_description: (moreOptions.CHECKPOINTS) ? entrustForm.checkpointInstruction : '',
3411
3455
  checkpoint_details: (moreOptions.CHECKPOINTS) ? JSON.stringify(this.responsibilityForm.checkpoints) : '',
@@ -3414,7 +3458,7 @@ class WorkflowComplianceComponent {
3414
3458
  comment: '',
3415
3459
  continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency) ? entrustForm.continuous_failed_days : 0,
3416
3460
  cost_of_compliance: '',
3417
- created_by: ((_d = entrustForm.assignors.list) === null || _d === void 0 ? void 0 : _d.length) < 1 ? 0 : this.memberId,
3461
+ created_by: ((_e = entrustForm.assignors.list) === null || _e === void 0 ? void 0 : _e.length) < 1 ? 0 : this.memberId,
3418
3462
  creation_window: 0,
3419
3463
  custom_tags: JSON.stringify(entrustForm.customTags),
3420
3464
  entity_tree: (moreOptions.RC) ? rcDetails : [],
@@ -3423,7 +3467,7 @@ class WorkflowComplianceComponent {
3423
3467
  failed_time_utc: entrustForm.failed_time_utc,
3424
3468
  failure_cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.notifyList, 'employee_id').toString() : '',
3425
3469
  frequency_details: entrustForm.frequency,
3426
- frequency_time: (_e = entrustForm.timeIn24Hr) !== null && _e !== void 0 ? _e : "23:59:00",
3470
+ frequency_time: (_f = entrustForm.timeIn24Hr) !== null && _f !== void 0 ? _f : "23:59:00",
3427
3471
  grc_object_id: 0,
3428
3472
  grc_relationship: '',
3429
3473
  if_testplan_failed: 0,
@@ -3431,7 +3475,7 @@ class WorkflowComplianceComponent {
3431
3475
  isGroupAssignTo: (entrustForm.assignees.whoCanComplete == 'ANY_ONE') ? 1 : 0,
3432
3476
  is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
3433
3477
  library_report_id: 0,
3434
- lifecycle_details: (_f = entrustForm.lifecycleDetails) !== null && _f !== void 0 ? _f : '0000-00-00~~0',
3478
+ lifecycle_details: (_g = entrustForm.lifecycleDetails) !== null && _g !== void 0 ? _g : '0000-00-00~~0',
3435
3479
  link_for_details: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatLinks : [],
3436
3480
  linkages: { compliance: [] },
3437
3481
  member_id: this.returnIds(entrustForm.assignors.list, 'member_id').length > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
@@ -3468,7 +3512,7 @@ class WorkflowComplianceComponent {
3468
3512
  test_required_flag: (moreOptions.ASSURANCE) ? (entrustForm.assuranceList.length > 0 ? 1 : 0) : 0,
3469
3513
  testplan_category_id: (moreOptions.ASSURANCE) ? this.returnIds(entrustForm.assuranceList, 'category_id') : [],
3470
3514
  testplan_category_manager: '',
3471
- audit_category_details: ((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.audit_category_details) === null || _h === void 0 ? void 0 : _h.category_id) ? {
3515
+ audit_category_details: ((_j = (_h = this.responsibilityForm) === null || _h === void 0 ? void 0 : _h.audit_category_details) === null || _j === void 0 ? void 0 : _j.category_id) ? {
3472
3516
  category_id: this.responsibilityForm.audit_category_details.category_id,
3473
3517
  sample: this.selectedSample === 0 ? this.sampleValue : 0,
3474
3518
  percentage: this.selectedSample === 1 ? this.samplePercentage : 0,
@@ -3482,40 +3526,39 @@ class WorkflowComplianceComponent {
3482
3526
  frequency_time: ''
3483
3527
  },
3484
3528
  assessment: {
3485
- category_id: moreOptions.ASSESSMENT ? (_j = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _j === void 0 ? void 0 : _j.category_id : '',
3486
- assessment_id: moreOptions.ASSESSMENT ? (_k = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _k === void 0 ? void 0 : _k.assessment_id : ''
3529
+ category_id: moreOptions.ASSESSMENT ? (_k = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _k === void 0 ? void 0 : _k.category_id : '',
3530
+ assessment_id: moreOptions.ASSESSMENT ? (_l = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _l === void 0 ? void 0 : _l.assessment_id : ''
3487
3531
  },
3488
3532
  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 : {}) : {},
3489
- questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_l = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _l === void 0 ? void 0 : _l.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
3533
+ questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_m = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _m === void 0 ? void 0 : _m.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
3490
3534
  };
3491
3535
  this.responsibilityPayload = payload;
3492
3536
  if (this.mode == 'CREATE' && !this.isDuplicateEntrust) {
3493
- payload.program_cat_ids = ((_m = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.program) === null || _m === void 0 ? void 0 : _m.length) ? [entrustForm.program[0].category_id] : [],
3494
- this.responsibilityService.submitEntrust(payload).subscribe((res) => {
3495
- this.loader = false;
3496
- this.uiKitService.isLoader = false;
3497
- this.showSmiley = true;
3498
- this.uiKitService.isSmileyOn = true;
3499
- this.responsibilityData = res;
3500
- if (res.message && res.message.toLowerCase() === 'bulk entrust') {
3501
- this.smileyMessage = `You have entrusted ${res.calculate_no_of_responsibiities} responsibilities. These would be reflected within your account in sometime.`;
3502
- }
3503
- if (this.isNotificationPending && payload.created_by == 0) {
3504
- this.smileyMessage = 'This responsibility has been added to the notification queue.';
3505
- }
3506
- else {
3507
- if (payload.created_by > 0) {
3508
- this.actionButtons[1].buttonText = "View Responsibilities";
3509
- this.smileyMessage = `You just created a responsibility on behalf ${entrustForm.assignors.list.find((member) => member.member_id === payload.member_id).member_name}`;
3510
- }
3537
+ this.responsibilityService.submitEntrust(payload).subscribe((res) => {
3538
+ this.loader = false;
3539
+ this.uiKitService.isLoader = false;
3540
+ this.showSmiley = true;
3541
+ this.uiKitService.isSmileyOn = true;
3542
+ this.responsibilityData = res;
3543
+ if (res.message && res.message.toLowerCase() === 'bulk entrust') {
3544
+ this.smileyMessage = `You have entrusted ${res.calculate_no_of_responsibiities} responsibilities. These would be reflected within your account in sometime.`;
3545
+ }
3546
+ if (this.isNotificationPending && payload.created_by == 0) {
3547
+ this.smileyMessage = 'This responsibility has been added to the notification queue.';
3548
+ }
3549
+ else {
3550
+ if (payload.created_by > 0) {
3551
+ this.actionButtons[1].buttonText = "View Responsibilities";
3552
+ this.smileyMessage = `You just created a responsibility on behalf ${entrustForm.assignors.list.find((member) => member.member_id === payload.member_id).member_name}`;
3511
3553
  }
3512
- //this.reset();
3513
- }, err => {
3514
- console.log(err);
3515
- this.loader = false;
3516
- this.uiKitService.isLoader = false;
3517
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
3518
- });
3554
+ }
3555
+ //this.reset();
3556
+ }, err => {
3557
+ console.log(err);
3558
+ this.loader = false;
3559
+ this.uiKitService.isLoader = false;
3560
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
3561
+ });
3519
3562
  }
3520
3563
  if (this.mode == 'EDIT' || this.isDuplicateEntrust) {
3521
3564
  this.smileyMessage = `The responsibility has been modified.`;
@@ -3999,9 +4042,9 @@ class WorkflowComplianceComponent {
3999
4042
  }
4000
4043
  checkedMoreOptions.push('RISK_CLASSIFICATION');
4001
4044
  this.moreOptions.RISK_CLASSIFICATION = true;
4002
- if (this.responsibilityForm.category.length > 0) {
4003
- checkedMoreOptions.push('CATEGORY');
4004
- this.moreOptions.CATEGORY = true;
4045
+ if (this.responsibilityForm.program.length > 0) {
4046
+ checkedMoreOptions.push('PROGRAM');
4047
+ this.moreOptions.PROGRAM = true;
4005
4048
  }
4006
4049
  if (this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatRequired) {
4007
4050
  checkedMoreOptions.push('FORMATE_EVIDENCE');
@@ -4154,7 +4197,7 @@ class WorkflowComplianceComponent {
4154
4197
  WorkflowComplianceComponent.decorators = [
4155
4198
  { type: Component, args: [{
4156
4199
  selector: 'app-workflow-compliance',
4157
- 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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assignees?.length>2\">\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 <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\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 <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 <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 <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\r\n [class.active]=\"activeSelector === 'program'\"\r\n [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=\"\"\r\n *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)\"\r\n aria-placeholder=\"Select the responsibility program or categories that this responsibility relates to.\">\r\n </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\"\r\n [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program?.slice(0,2)\"><i\r\n class=\"icons\" *ngIf=\"!selectedProgram\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{program?.name??'--'}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.program?.length > 2\" type=\"button\" appPopover\r\n (click)=\"program.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.program?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n 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 *ngFor=\"let program of responsibilityForm?.program | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{ program.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 <!-- 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 <!-- 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 <!-- <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Responsibility Category(s)\" readonly> -->\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'\"\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\">\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\">\r\n <div class=\"chip-container\" [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 <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 *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\"\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\">\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 *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\"\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\">\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 <!-- <div class=\"switch-row\">\r\n <app-cs-switch [ngValue]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\">SEQUENTIAL <i\r\n class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n <app-cs-switch [ngValue]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\">ANY REVIEWER CAN\r\n MARK THIS AS REVIEWED <i class=\"icons\" [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.'\" placement=\"bottom-right\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n </div> -->\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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\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 <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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\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 <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 #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 </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\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\" [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust\" [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<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [hideProgramsList]=\"selectedProgram?true:false\"\r\n [selectedCategories]=\"responsibilityForm.category\" [selectedProgram]=\"responsibilityForm.program\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [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\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [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\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [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\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'\" [categoryList]=\"categories\"\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 = [];\"\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>",
4200
+ 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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\"\r\n [class.plus]=\"responsibilityForm?.assignees?.length>2\">\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 <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\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 <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 <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 <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\r\n [class.active]=\"activeSelector === 'program'\"\r\n [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=\"\"\r\n *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)\"\r\n aria-placeholder=\"Select the responsibility program or categories that this responsibility relates to.\">\r\n </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\"\r\n [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program?.slice(0,2)\"><i\r\n class=\"icons\" *ngIf=\"!selectedProgram\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{program?.name??'--'}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.program?.length > 2\" type=\"button\" appPopover\r\n (click)=\"program.popover()\" placement=\"right\">+\r\n {{responsibilityForm?.program?.slice(2).length}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n 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 *ngFor=\"let program of responsibilityForm?.program | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n {{ program.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 <!-- 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 <!-- 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'\"\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\">\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\">\r\n <div class=\"chip-container\" [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 <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 *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\"\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\">\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 *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\"\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\">\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 <!-- <div class=\"switch-row\">\r\n <app-cs-switch [ngValue]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\">SEQUENTIAL <i\r\n class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n <app-cs-switch [ngValue]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\">ANY REVIEWER CAN\r\n MARK THIS AS REVIEWED <i class=\"icons\" [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.'\" placement=\"bottom-right\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n </div> -->\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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\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 <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\">\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\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\"\r\n [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\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 <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 #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 </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\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\" [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust\" [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<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [hideProgramsList]=\"selectedProgram?true:false\"\r\n [selectedCategories]=\"responsibilityForm.category\" [selectedProgram]=\"responsibilityForm.program\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [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\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [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\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [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\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'\" [categoryList]=\"categories\"\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 = [];\"\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>",
4158
4201
  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)}", "@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 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}::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:22px}::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 .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}"]
4159
4202
  },] }
4160
4203
  ];
@@ -22280,6 +22323,10 @@ class ProgramListingComponent {
22280
22323
  this.subList = false;
22281
22324
  this.loader = false;
22282
22325
  this.selectedCategories = [];
22326
+ this.previousSelectedValues = {
22327
+ program: {},
22328
+ categories: []
22329
+ };
22283
22330
  this.programData = {
22284
22331
  data: [],
22285
22332
  from: 0,
@@ -22317,6 +22364,7 @@ class ProgramListingComponent {
22317
22364
  internal_controls: 3,
22318
22365
  others: 0,
22319
22366
  };
22367
+ this.displayConfirmationMessage = false;
22320
22368
  this.saveSelectedProgram = new EventEmitter();
22321
22369
  this.closeEvent = new EventEmitter();
22322
22370
  this.allCategories = [];
@@ -22349,9 +22397,7 @@ class ProgramListingComponent {
22349
22397
  this.getSelectedProgramCount();
22350
22398
  }
22351
22399
  if (this.selectedCategories) {
22352
- this.selectedCategories.forEach(element => {
22353
- this.selectedIds.push(element);
22354
- });
22400
+ this.populateCategories();
22355
22401
  }
22356
22402
  if (this.hideProgramsList) {
22357
22403
  this.getCategoriesList();
@@ -22359,9 +22405,30 @@ class ProgramListingComponent {
22359
22405
  else {
22360
22406
  this.getProgramsList();
22361
22407
  }
22408
+ this.previousSelectedValues = {
22409
+ programs: this.currentProgram,
22410
+ categories: (this.selectedCategories.length) ? [...new Set(this.selectedCategories)] : [],
22411
+ };
22362
22412
  }
22363
- clickSubList() {
22364
- this.subList = !this.subList;
22413
+ populateCategories() {
22414
+ this.loader = true;
22415
+ let params = new HttpParams();
22416
+ params = params.append('program_id', this.currentProgram._id);
22417
+ params = params.append('isPagination', false);
22418
+ this.responsibilityService.getProgramsList(params).subscribe({
22419
+ next: (res) => {
22420
+ const allCategories = res.data;
22421
+ this.categoryData.selectedCategories = allCategories.filter((ele) => this.selectedCategories.includes(ele.category_id));
22422
+ this.categoryData.selectedCategories.forEach((element) => {
22423
+ this.selectedIds.push(element.category_id);
22424
+ });
22425
+ this.loader = false;
22426
+ },
22427
+ error: err => {
22428
+ console.error(err);
22429
+ this.loader = false;
22430
+ }
22431
+ });
22365
22432
  }
22366
22433
  handleSearch(event) {
22367
22434
  if (this.searchString != event) {
@@ -22385,12 +22452,34 @@ class ProgramListingComponent {
22385
22452
  }
22386
22453
  selectAllCategories(value) {
22387
22454
  if (value) {
22388
- if (this.categoryData.totalPages === 1) {
22455
+ this.selectedIds = [];
22456
+ this.categoryData.selectedCategories = [];
22457
+ if (this.categoryData.totalPages < 2) {
22389
22458
  this.categoryData.data.forEach((ele) => {
22390
22459
  this.selectedIds.push(ele.category_id);
22391
22460
  this.categoryData.selectedCategories.push(ele);
22392
22461
  });
22393
22462
  }
22463
+ else {
22464
+ this.loader = true;
22465
+ let params = new HttpParams();
22466
+ params = params.append('program_id', this.currentProgram._id);
22467
+ params = params.append('isPagination', false);
22468
+ this.responsibilityService.getProgramsList(params).subscribe({
22469
+ next: (res) => {
22470
+ const allCategories = res.data;
22471
+ this.categoryData.selectedCategories = res.data;
22472
+ allCategories.forEach((element) => {
22473
+ this.selectedIds.push(element.category_id);
22474
+ });
22475
+ this.loader = false;
22476
+ },
22477
+ error: err => {
22478
+ console.error(err);
22479
+ this.loader = false;
22480
+ }
22481
+ });
22482
+ }
22394
22483
  }
22395
22484
  else {
22396
22485
  this.categoryData.selectedCategories = [];
@@ -22419,7 +22508,26 @@ class ProgramListingComponent {
22419
22508
  }
22420
22509
  }
22421
22510
  backToPrograms() {
22422
- this.showCategories = false;
22511
+ var _a, _b;
22512
+ if (!this.hideProgramsList) {
22513
+ this.showCategories = false;
22514
+ if (((_b = (_a = this.previousSelectedValues) === null || _a === void 0 ? void 0 : _a.program) === null || _b === void 0 ? void 0 : _b._id) == this.currentProgram) {
22515
+ this.categoryData.selectedCategories = [...new Set(this.previousSelectedValues.categories)];
22516
+ this.selectedIds = [];
22517
+ this.categoryData.selectedCategories.forEach(element => {
22518
+ this.selectedIds.push(element);
22519
+ });
22520
+ }
22521
+ else {
22522
+ this.categoryData.selectedCategories = [];
22523
+ this.selectedIds = [];
22524
+ }
22525
+ }
22526
+ else {
22527
+ this.categoryData.selectedCategories = [];
22528
+ this.selectedIds = [];
22529
+ this.close();
22530
+ }
22423
22531
  }
22424
22532
  changeTab(type) {
22425
22533
  this.activeTab = type;
@@ -22475,7 +22583,7 @@ class ProgramListingComponent {
22475
22583
  params = params.append('program_id', this.currentProgram._id);
22476
22584
  params = params.append('pageNo', this.categoryData.currentPage);
22477
22585
  if (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search) {
22478
- params = params.append('searchText', this.searchString);
22586
+ params = params.append('searchText', this.categorySearchString);
22479
22587
  }
22480
22588
  this.responsibilityService.getProgramsList(params).subscribe({
22481
22589
  next: (res) => {
@@ -22495,11 +22603,6 @@ class ProgramListingComponent {
22495
22603
  }
22496
22604
  saveProgram() {
22497
22605
  }
22498
- // save() {
22499
- // this.getCategoriesList(this.currentProgram?._id);
22500
- // }
22501
- cancel() {
22502
- }
22503
22606
  selectCategory(mode, category) {
22504
22607
  if (mode) {
22505
22608
  this.selectedIds.push(category.category_id);
@@ -22522,8 +22625,20 @@ class ProgramListingComponent {
22522
22625
  this.closeEvent.emit();
22523
22626
  }
22524
22627
  save() {
22525
- // this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedCategories });
22526
- this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedIds });
22628
+ if (!this.hideProgramsList) {
22629
+ this.displayConfirmationMessage = true;
22630
+ }
22631
+ else {
22632
+ this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedIds });
22633
+ }
22634
+ }
22635
+ saveChanges(value) {
22636
+ if (value) {
22637
+ this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedIds });
22638
+ }
22639
+ else {
22640
+ this.displayConfirmationMessage = false;
22641
+ }
22527
22642
  }
22528
22643
  deleteEvent(event) {
22529
22644
  this.currentProgram = undefined;
@@ -22555,7 +22670,7 @@ class ProgramListingComponent {
22555
22670
  ProgramListingComponent.decorators = [
22556
22671
  { type: Component, args: [{
22557
22672
  selector: 'app-program-listing',
22558
- template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n <div class=\"program-listing-head\">\r\n <h3 class=\"program-listing-title\">Select a Program</h3>\r\n </div>\r\n <div class=\"program-listing-body\">\r\n <div class=\"filter-card-row\">\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n {{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n {{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\"\r\n (click)=\"changeTab('internal_controls')\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n {{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n {{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Programs\" />\r\n </div>\r\n <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\" [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n <div class=\"program-listing-part\" [class.with-category-list]=\"showCategories\">\r\n <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n \r\n <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\" *ngFor=\"let program of programData.data;let i = index\" >\r\n <div class=\"table-row main-list\" \r\n [class.active]=\"currentProgram?._id == program?._id\" \r\n [class.disabled]=\"false\" (click)=\"selectProgram(true,program)\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n <app-cs-radio [name]=\"'t'\" [checked]= \"currentProgram?._id == program?._id\" (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n <!-- <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n (ngValueChange)=\"selectCategory($event,activeTab,category)\"></app-cs-checkbox> -->\r\n\r\n </div>\r\n <div class=\"table-column name\" >\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n <!-- <span class=\"count\">5</span> -->\r\n </div>\r\n <!-- <div class=\"within-part\" *ngIf=\"true\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">South Africa > America > India</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\" [disabled]=\"false\">\r\n <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\" (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\"\r\n (closeEvent)=\"openCategories()\" (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\">\r\n</app-floating-bar>\r\n\r\n\r\n <app-loader *ngIf=\"loader\"></app-loader>\r\n <!-- <app-floating-bar></app-floating-bar> -->\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n <div class=\"program-listing-head\">\r\n <h3 class=\"program-listing-title\"><button class=\"back-btn\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button> Program > {{currentProgram?.name}} > Select Program Categories</h3>\r\n </div>\r\n <div class=\"program-listing-body\">\r\n\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\" placeholder=\"Search Categories\" />\r\n </div>\r\n <app-pagination *ngIf=\"categoryData.totalPages > 1\" [start]=\"categoryData.from\" [end]=\"categoryData.to\" [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\" [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n <div class=\"program-listing-part\" [class.with-category-list]=\"false\">\r\n <app-no-data *ngIf=\"categoryData?.data?.length==0 && !loader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n <ng-container>\r\n <div class=\"selected-area\" *ngIf=\"!loader\">\r\n <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\"\r\n (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\"\r\n (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\"\r\n (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n\r\n </div>\r\n <div class=\"program-listing-item\" [class.active]=\"subList\">\r\n <div class=\"table-row main-list\" *ngFor=\"let category of categoryData.data;let i = index\"\r\n [class.active]=\"selectedIds.includes(category.category_id)\" [class.disabled]=\"false\" (click)=\"clickSubList()\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+1}}</div>\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div> </div>\r\n <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <span *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))? parent+' < ':parent}} </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"program-listing-confirmation\" *ngIf=\"false\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n <div class=\"text\">If you change the roles, any unsaved changes would be lost.</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\">NO</button>\r\n <button class=\"yes-btn\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n [singularText]=\"'Category selected'\" [pluralText]=\"'Categories selected'\"\r\n (closeEvent)=\"save()\" (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n </app-floating-bar>\r\n <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>",
22673
+ template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n <div class=\"program-listing-head\">\r\n <h3 class=\"program-listing-title\">Select a Program</h3>\r\n </div>\r\n <div class=\"program-listing-body\">\r\n <div class=\"filter-card-row\">\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n {{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n {{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\"\r\n (click)=\"changeTab('internal_controls')\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n {{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div>\r\n <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n {{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n placeholder=\"Search Programs\" />\r\n </div>\r\n <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\"\r\n [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\"\r\n [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n <div class=\"program-listing-part\" [class.with-category-list]=\"showCategories\">\r\n <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\"\r\n *ngFor=\"let program of programData.data;let i = index\">\r\n <div class=\"table-row main-list\" [class.active]=\"currentProgram?._id == program?._id\"\r\n [class.disabled]=\"false\" (click)=\"selectProgram(true,program)\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\"\r\n (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n [disabled]=\"false\">\r\n <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</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)=\"saveChanges(false)\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\">\r\n </app-floating-bar>\r\n\r\n\r\n <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n <div class=\"program-listing-head\">\r\n <h3 class=\"program-listing-title\">\r\n <button class=\"back-btn\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button> Program >\r\n {{currentProgram?.name}} > Select Program Categories\r\n </h3>\r\n </div>\r\n <div class=\"program-listing-body\">\r\n\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n placeholder=\"Search Categories\" />\r\n </div>\r\n <app-pagination *ngIf=\"categoryData.totalPages > 1\" [start]=\"categoryData.from\" [end]=\"categoryData.to\"\r\n [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\"\r\n [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n <div class=\"program-listing-part\" [class.with-category-list]=\"false\">\r\n <app-no-data *ngIf=\"categoryData?.data?.length==0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n <ng-container>\r\n <div class=\"selected-area\" *ngIf=\"!loader\">\r\n <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\"\r\n (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\"\r\n (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\"\r\n (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n\r\n </div>\r\n <div class=\"program-listing-item\" [class.active]=\"subList\">\r\n <div class=\"table-row main-list\" *ngFor=\"let category of categoryData.data;let i = index\"\r\n [class.active]=\"selectedIds.includes(category.category_id)\" [class.disabled]=\"false\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+1\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n [tooltipMandatory]=\"true\">{{i+1}}</div>\r\n <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n </div>\r\n <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <span\r\n *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n parent+' < ':parent}} </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</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)=\"saveChanges(false)\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n [singularText]=\"'Category selected'\"\r\n [pluralText]=\"'Categories selected'\" (closeEvent)=\"save()\"\r\n (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n </app-floating-bar>\r\n <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>",
22559
22674
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .program-listing{background:#fff;border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:1}::ng-deep .program-listing.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 .program-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .program-listing-head button.back-btn{background:transparent;border:none;border-radius:0;font-size:16px;padding:0;margin:0 8px 0 0;position:relative;top:2px}::ng-deep .program-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .program-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .program-listing-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .program-listing-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:10px}::ng-deep .program-listing-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .program-listing-body .search-block{position:relative}::ng-deep .program-listing-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 .program-listing-body .search-block input::-moz-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:-ms-input-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 218px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-category-list{height:calc(100vh - 300px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#747576;font-size:11px;font-weight:500;height:28px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:16px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1e5dd3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-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 .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}"]
22560
22675
  },] }
22561
22676
  ];